svg入门详解

Posted joyco773

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了svg入门详解相关的知识,希望对你有一定的参考价值。

技术图片

 

 

一、svg是什么?

SVG 意为可缩放矢量图形(Scalable Vector Graphics)。
SVG 是使用 XML 来描述二维图形和绘图程序的语言。
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。
SVG 是万维网联盟的标准。

二、svg的优势

与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:

  • SVG 图像可通过文本编辑器来创建和修改;
  • SVG 图像可被搜索、索引、脚本化或压缩;
  • SVG 是可伸缩的;
  • SVG 图像可在任何的分辨率下被高质量地打印;
  • SVG 可在图像质量不下降的情况下被放大;

三、浏览器支持情况

 
技术图片
image.png

四、使用方式

1、可在浏览器直接打开;
2、在html中的使用;
SVG 文件可通过以下标签嵌入 HTML 文档: <embed> 、 <object>  、  <iframe> 和 <img> 。
SVG的代码可以直接嵌入到HTML页面中,或直接链接到SVG文件。
(1)使用  <embed>  标签

  • 优势:所有主要浏览器都支持,并允许使用脚本
  • 缺点:不推荐在HTML4和XHTML中使用(但在HTML5允许)

示例:

<embed width="300px" height="300px" src="img/demo.svg" type="image/svg+xml" />

(2)使用  <object>  标签

  • 优势:所有主要浏览器都支持,并支持HTML4,XHTML和HTML5标准
  • 缺点:不允许使用脚本。

示例:

<object width="300px" height="300px" data="img/demo.svg" type="image/svg+xml"></object>

(3)使用  <iframe>  标签

  • 优势:所有主要浏览器都支持,并允许使用脚本
  • 缺点:不推荐在HTML4和XHTML中使用(但在HTML5允许)

示例:

<iframe width="300px" height="300px" src="img/demo.svg"></iframe>

(4)直接在HTML嵌入SVG代码

示例:

<svg width="500px" height="500px" style="margin:50px;" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="20" rx="10" ry="10" width="300" height="300" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;stroke-opacity:0.9;opacity:0.9;"/> 
</svg>

(5)使用 <img> 标签

示例:

<img src="img/demo.svg" width="300px" height="300px"/>

(6)链接到 svg 文件

示例:

<a href="img/demo.svg">查看svg</a>

3、在css中使用

示例:

1 .container{
2   background: white url(img/demo.svg) repeat;
3 }

作者:ywyan
链接:https://www.jianshu.com/p/0899c6b481cd
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

以上是关于svg入门详解的主要内容,如果未能解决你的问题,请参考以下文章

前端开发常用代码片段(中篇)

HTML5——SVG 之 path 详解

用php下载一个svg

text 使用SVG的片段

css 快速片段将svg与中心对齐并缩放到视口大小。

通过 webapp 提供时,SVG 片段标识符在 Safari 中被交换