重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
HTML5使用SVG的方法
这篇文章将为大家详细讲解有关HTML5使用SVG的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联于2013年开始，是专业互联网技术服务公司，拥有项目网站设计、做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元青原做网站,已为上家服务,为青原各地企业和个人服务,联系电话:18982081108
代码优化永远是程序员亘古不变的需求，而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环，既然是优化，那我们先来看看SVG图片都有哪些优势：
SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
几个SVG图片小例子：
我们来看一下第三个分享图标的代码：
不了解SVG的同学现在一定一脸问号，就跟我第一次见他们一样，别着急，我们从基础看起。
什么是SVG？
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。此外SVG 是万维网联盟的标准，SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。
怎么使用？
在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中,例如上面的那颗小红心：
SVG 代码也可以写在一个以.svg结尾的文件中，然后用 CSS也可以使用svg SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页。 SVG的语法 1. SVG 代码都放在顶层标签 如果只想展示 SVG 图像的一部分，就要指定viewBox属性。 注意，视口必须适配所在的空间。上面代码中，视口的大小是 50 x 50，由于 SVG 图像的大小是 100 x 100，所以视口会放大去适配 SVG 图像的大小，即放大了四倍。 如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。 2. 上面的代码定义了三个圆。 class属性用来指定对应的 CSS 类。 SVG 的 CSS 属性与网页元素有所不同。 fill：填充色 3. 上面代码中， 4. 5. 6. 7. 8. M：移动到（moveto） 9. 10. 11. 12. 13. 上面代码中， 14. 上面代码中， 15. 上面代码中，矩形会不断移动，产生动画效果。 attributeName：发生动画效果的属性名。 16. 上面代码中， 1. DOM操作 上面代码插入网页之后，就可以用 CSS 定制样式。 然后，可以用 JavaScript 代码操作 SVG。 上面代码指定，如果点击图形，就改写circle元素的r属性。 2. 获取 SVG DOM、、.logo {
background: url(logo.svg);
}
.red {
fill: red;
}
.fancy {
fill: none;
stroke: black;
stroke-width: 3pt;
}
stroke：描边色
stroke-width：边框宽度
L：画直线到（lineto）
Z：闭合路径
from：单次动画的初始值。
to：单次动画的结束值。
dur：单次动画的持续时间。
repeatCount：动画的循环模式。
可以在多个属性上面定义动画。JavaScript 操作SVG
如果 SVG 代码直接写在 HTML 网页之中，它就成为网页 DOM 的一部分，可以直接用 DOM 操作。circle {
stroke-width: 5;
stroke: #f00;
fill: #ff0;
}
circle:hover {
stroke: #090;
fill: #f8f8f8;
}var mycircle = document.getElementById('mycircle');
mycircle.addEventListener('click', function(e) {
console.log('circle clicked - enlarging');
mycircle.setAttribute('r', 60);
}, false);
使用、