浅谈SVG(可缩放的矢量图形)
前一段项目中用到了svg图片就和其他的元素一样 直接引用就可以展示在页面上,因为项目紧张没有仔细的研究,最近在扩展自己的基础知识,偶然看到了这个东西,于是总结了一些博客园中关于这个svg的基础知识,只是自己基础的理解,没有更深层次的理解,但是并不想作大自然的搬运工,只是想把自己理解到的和大家分享一下,废话不多说,下面开始正式的讲解:
1.SVG是啥
我的理解就是一个文本文件,但是能够被浏览器渲染成一个图像。
那我们已经有常用的图片了为什么还要用这个生成图片呢?
相对来说,他比普通的jpg/png图片占用的体积更小;而且能够随意的放大缩小并不会失真。以下是百度百科的解释,相信看起来会更加清晰:

2.SVG怎么用:
1. 直接在html文件中用SVG标签插入;<svg>....</svg>
2. 也可以通过 img 等标签直接引用已经写好的SVG文件;
<img src="svgDemo.svg">
还有其他几种用法:放到css样式中/转化成base64
3. SVG的语法:
可以在W3school或者菜鸟教程上面看到详细的讲解;
总结:
实际项目中应该是视觉提供给我们一个SVG文件,然后我们负责把这个文件展示在页面当中,具体的图像绘制规则接触的比较少,但是我们可以查看对应的svg文件(只是一个文本文件, 通过文本编辑起就可以打开)来学习绘图的方法。
学无止境,每一门学问都是值得深究的,但每个人的精力也是有限的,希望每个人都能用有限的精力去学习和创造更多的知识,只是因为热爱,而不是为了完成任务。
浅谈SVG(可缩放的矢量图形)的更多相关文章
- Qt3升至Qt4需要注意的几件事项浅谈
Qt3升至Qt4需要注意的几件事项浅谈 公司以前的项目是用Qt3写的,随着时间的推移慢慢显示出Qt3有多方面的限制,因此先公司决定用Qt4来改写这个项目,并为软件添加新功能,在此背景先编写此文章. 先 ...
- 浅谈JAVA集合框架
浅谈JAVA集合框架 Java提供了数种持有对象的方式,包括语言内置的Array,还有就是utilities中提供的容器类(container classes),又称群集类(collection cl ...
- 浅谈javascript函数节流
浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...
- 安卓开发_浅谈Android动画(四)
Property动画 概念:属性动画,即通过改变对象属性的动画. 特点:属性动画真正改变了一个UI控件,包括其事件触发焦点的位置 一.重要的动画类及属性值: 1. ValueAnimator 基本属 ...
- 浅谈OCR之Onenote 2010
原文:浅谈OCR之Onenote 2010 上一次我们讨论了Tesseract OCR引擎的用法,作为一款老牌的OCR引擎,目前已经开源,最新版本3.0中更是加入了中文OCR功能,再加上Google的 ...
- 【Unity游戏开发】浅谈 NGUI 中的 UIRoot、UIPanel、UICamera 组件
简介 马三最近换到了一家新的公司撸码,新的公司 UI 部分采用的是 NGUI 插件,而之前的公司用的一直是 Unity 自带的 UGUI,因此马三利用业余时间学习了一下 NGUI 插件的使用,并把知识 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 【ASP.NET MVC系列】浅谈Google Chrome浏览器(操作篇)(下)
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
- 浅谈关于QT中Webkit内核浏览器
关于QT中Webkit内核浏览器是本文要介绍的内容,主要是来学习QT中webkit中浏览器的使用.提起WebKit,大家自然而然地想到浏览器.作为浏览器内部的主要构件,WebKit的主要工作是渲染.给 ...
随机推荐
- 华为交换机VRRP 综合配置示例
组网需求: 楼层1和楼层2分别通过两条线路做冗余接入交换机(本示例只考虑vrrp,暂不考虑其他方面).当其中一段链路故障时,能通过另外一条链路传输. 配置信息: <lsw9>dis cu ...
- Hexo搭建博客笔记
Hexo搭建(建议看ppt:https://files.cnblogs.com/files/-SANG/%E4%BD%A0%E7%9A%84%E7%8C%AB.pptx ) 安装Git https:/ ...
- JFreeChart绘制XY折线图(工具类设计)
准备用Java写通信的仿真平台作为毕业设计,相比matlab绘图,Java绘图需要自己去写很多工具类,博主在这采用了JFreeChart的开源解决方案,摸索着自己写了一个XY折线图工具类,话不多说贴源 ...
- 【Ansible 文档】【译文】Ad-Hoc 命令介绍
Introduction To Ad-Hoc Commands Ad-Hoc命令介绍 下面的例子展示了如何使用 /usr/bin/ansible 来运行ad hoc任务. 什么是ad hoc命令? 一 ...
- Linux chmod +755和chmod +777 各是什么意思呢?
你可以在linux终端先输入ls -al,可以看到如: -rwx-r--r-- (一共10个参数)第一个跟参数跟chmod无关,先不管.2-4参数:属于user5-7参数:属于group8-10参数: ...
- Spark项目之电商用户行为分析大数据平台之(五)实时数据采集
- 21天,搞定软件测试从业者必备的Linux命令
开始之前,先同步一个结论: 对于软件测试从业者,如果你至今为止,还不懂Linux,或者完全没有接触Linux ,这是一件很危险和恐怖的事 . 此刻.现在.果断,学习Linux命令 . 如果你工作中,完 ...
- javascript实现拖曳与拖放图片
javascript实现拖曳与拖放图片 其实对于drag和drop拖曳与拖放事件IE很早以前就支持这个操作了,我们先来看看HTML5中新增的拖放API. 在HTML5中想要实现拖放操作,至少要做以下操 ...
- JS实现网页换肤功能效果
网页换肤的基本原理 使用 JS 切换对应的 CSS 样式表.例如hao123首页的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过 ...
- Ubuntu软件的安装和使用
windows 系统有很多的截图的软件 比如 QQ 浏览器什么的,但是ubuntu 还是很少的截图软件的接下来介绍一下ubuntu 的截图软件 1.键盘上的alt+printscreen 可以全屏幕的 ...