SVG 入门及嵌入HTML的7种方式

最新推荐文章于 2023-05-15 10:01:15 发布

福州司马懿

最新推荐文章于 2023-05-15 10:01:15 发布

阅读量3.3w

点赞数 10

分类专栏： SVG 文章标签： svg 矢量图

转载请注明出处——https://blog.csdn.net/chy555chy

本文链接：https://blog.csdn.net/chy555chy/article/details/53330593

版权

SVG 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了SVG（可缩放矢量图形）的基本概念及其相对于JPEG和GIF等格式的优势，并展示了如何创建SVG图像，以及如何将SVG图像嵌入HTML中进行显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SVG简介

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。

SVG与其他图像格式相比，SVG的优势在于

SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML

一个简单的SVG实例

<?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" width="130" height="80" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="rgb(0,100,255)" stroke-opacity="0.5" fill-opacity="0.5" />
</svg>

这里写图片描述

第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是”独立的”，或含有对外部文件的引用。
standalone=”no” 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。
第二行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“。该 DTD 位于 W3C，含有所有允许的 SVG 元素（DTD，即文档类型定义，作用是定义 XML 文档的合法构建模块）省略该行对显示并不会有影响。
SVG 代码以元素开始，包括开启标签和关闭标签。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

使用SVG

SVG可以单独显示

完整版如上例所示
最简的SVG形式，除了“SVG标签”和“xmlns名空间”其他声明标签均可省略。

<svg xmlns="http://www.w3.org/2000/svg">
    <rect width="300" height="100" style="fill:red;stroke-width:1;stroke:black"/>
</svg>

SVG可以嵌入HTML中显示

嵌入的方式有7种，分别是：

代码直接嵌入
<img>链接方式引用
<a>链接方式引用
CSS的background属性引用
<embed>
<object>
<iframe>

代码直接嵌入

<html>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg">
            <line x1="0" y1="0" x2="200" y2="200" style="stroke-width:1;stroke:black"/>
        </svg>
     </body>
</html>

<img>链接方式引用

<html>
    <body>
    <img src="svgDemo.svg" width="100" height="100"/>
    <img src="svgDemo.svg"/>
    </body>
</html>

结果如图（左为Chrome、右为Microsoft Edge）
这里写图片描述

在Chrome浏览器中可以看出，<img>标签的默认大小是 300 x 150。
这里写图片描述

<a>链接方式引用

该方法只会显示链接文本，只有当用户单击链接，才能跳转至SVG图像。

<html> 
    <body> 
        <a href="test.svg">转到SVG图像</a>
    </body> 
</html>

这里写图片描述

CSS的background属性引用

<html> 
    <body> 
        <div style="width:500;height:500;background:yellow url(test.svg) repeat"/>
    </body> 
</html>

这里写图片描述

<embed>、<object>、<iframe>

<html>
    <body>
        <embed src="svgDemo.svg" type="image/svg+xml" /> 
        <object data="svgDemo.svg" type="image/svg+xml" /> 
        <iframe src="svgDemo.svg" />
    </body>
</html>