美文网首页
SVG 简介

SVG 简介

作者: _chuuuing_ | 来源:发表于2017-06-27 19:53 被阅读0次

    基础

    学习SVG之前需要掌握: HTML 与 XML
    SVG参考手册:SVG元素列表

    • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
    • SVG 用来定义用于网络的基于矢量的图形
    • SVG 使用 XML 格式定义图形
    • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
    • SVG 是万维网联盟的标准
    • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

    SVG => XML

    SVG 文件是纯粹的 XML,所以一般的svg都放在xml文件中。

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    </svg>
    

    在HTML中使用SVG的5种方法

    SVG 文件可通过以下标签嵌入 HTML 文档:<embed><object> 或者 <iframe>,或者直接在HTML中嵌入SVG代码,也可以用<a>标签链接到svg文件

    • <embed>
      优势:所有主要浏览器都支持,并允许使用脚本
      缺点:不推荐在HTML4和XHTML中使用(但在HTML5允许)
      <embed src="circle1.svg" type="image/svg+xml" />```

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

    <object data="circle1.svg" type="image/svg+xml"></object>
    
    • <iframe>
      优势:所有主要浏览器都支持,并允许使用脚本
      缺点:不推荐在HTML4和XHTML中使用(但在HTML5允许)
    <iframe src="circle1.svg"></iframe>
    
    • 在HTML中嵌入SVG代码
    <html>
    ...
    <svg>...</svg>
    ...
    </html>
    
    • <a>标签链接到svg文件
    <a href="circle1.svg">View SVG file</a>```

    相关文章

      网友评论

          本文标题:SVG 简介

          本文链接:https://www.haomeiwen.com/subject/gcoecxtx.html