SVG基础|基础中的基础

SVG 意为可缩放矢量图形(Scalable Vector Graphics);SVG 是使用 XML 来描述二维图形和绘图程序的语言。

SVG是什么

SVG图形其实就是一段XML代码,在HTML页面引用是通过引用.svg文件格式,或者直接在.html文件中放置元素。而两者最大的区别就是,独立的SVG必须添加一个XML声明。

典型的SVG声明:

<?xml version="1.0"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="300">

    <!-- SVG代码 -->

</svg>

在这个示例中,还声明了SVG画布的大小。定义SVG画布大小是可选的,但强烈推荐,使用SVG时定义其画布大小。

在使用代码编写SVG时,最好加上DTD,这是非常有用的。在一些示例中,你可能会看到这样的代码:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg">

   <!-- SVG代码 -->

</svg>

 

SVG有哪些优势?

这里大体说一下几个主要优势:

1.SVG与JPEG和GIF图像比起来,尺寸更小,且可压缩性更强。
2.SVG图像可在任何的分辨率下被高质量地打印
3.SVG可在图像质量不下降的情况下被放大
4.SVG图像中的文本是可选的,同时也是可搜索的(很适合制作地图)

如何使用svg?

SVG文件是纯粹的XML,或许大家更为关心的是如何在Web浏览器中让SVG显示。要在浏览器中显示(前提是浏览器支持),可以通过几种方法来实现:

1.指向SVG文件地址
2.将SVG直接嵌套在HTML中

而将SVG图像嵌入到HTML文件有多种方法:

1.使用iframe元素来嵌入SVG图像
2.使用< img >元素来嵌入SVG图像
3.将SVG图像作为背景图像嵌入
4.直接使用svg元素
5.使用embed元素来嵌入SVG图像
6.使用object元素来嵌入SVG图像

前三种方式就当作普通的jpg图像来处理,embed和object是早期的或是html4支持的,这里就不说了。

使用< svg >元素

直接使用< svg >元素,通过代码将SVG图像嵌入到HTML代码中

 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="300">

    <!-- SVG代码 -->

</svg>