SVG系列教程：SVG文件结构

作者：大漠 日期：2014-11-19 点击：14253
SVG
会员专栏

特别声明：为感谢社区广大朋友对小站的支持，自2019年10月1日至2019年11月11日开通年费VIP通道，年费价格为 ¥299.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

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

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