SVG系列教程:SVG文件结构

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

在《SVG简介与嵌入HTML页面的方式》简单的介绍了什么是SVG?以及SVG图形与其它格式图像相比,优势在哪。另外介绍怎么将SVG图像应用到HTML页面,让浏览器能显示。从文中了解到,SVG图形其实就是一段XML代码,在HTML页面引用是通过引用.svg文件格式,或者直接在.html文件中放置<svg>元素。而两者最大的区别就是,独立的SVG必须添加一个XML声明。那么这篇文章要和大家一起探讨的就是SVG文件(.svg)的结构。

SVG文件结构

一个独立的SVG文件,也就是平时看到的以扩展名.svg结尾的文件,他主要包括:

其中XML声明其实和HTML文档的DTD声明是类似的。大家是否还记得HTML相关的DTD声明方式。比如HTML5的声明方式:

<!DOCTYPE html>

其它相关的DTD文档声明方式,可以点击这里查阅。

SVG文件使用的是XML声明方式:

<?xml version="1.0"?>

第二部分是SVG的XML声明空间,这一部分类似于HTML中的xmlns="http://www.w3.org/1999/xhtml"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

而SVG文件中<svg>的声明空间是xmlns="http://www.w3.org/2000/svg:

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

其实在实际使用中,他也分为几种不同的方式。

最小的SVG结构

其实最小的SVG结构就是一种简写的结构:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
    <!-- SVG代码 -->
</svg>

典型的SVG结构

除了简写的SVG结构,还有一种典型的SVG结构。通常情况之下,一个SVG文件包含内部链接,在这种情况之下,必须定义xlink声明空间http://www.w3.org/1999/xlink:

<?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文件中的代码示例:

<?xml versi
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/html5/svg-file-structure.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部