特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
在《SVG简介与嵌入HTML页面的方式》简单的介绍了什么是SVG?以及SVG图形与其它格式图像相比,优势在哪。另外介绍怎么将SVG图像应用到HTML页面,让浏览器能显示。从文中了解到,SVG图形其实就是一段XML代码,在HTML页面引用是通过引用.svg
文件格式,或者直接在.html
文件中放置<svg>
元素。而两者最大的区别就是,独立的SVG必须添加一个XML声明。那么这篇文章要和大家一起探讨的就是SVG文件(.svg
)的结构。
SVG文件结构
一个独立的SVG文件,也就是平时看到的以扩展名.svg
结尾的文件,他主要包括:
- XML声明
<svg>
根元素包括一个用来描述SVG的XML声明空间。
其中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
如需转载,烦请注明出处:https://www.w3cplus.com/html5/svg-file-structure.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!