×

【SVG】关于SVG文件结构的介绍

作者:Web前端之家2016.09.10来源:Web前端之家浏览:10463评论:0
关键词:html5SVG
微信公众号

微信公众号

在《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 version="1.0" ?>
<!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg enable-background="new 0 0 145 145" id="Layer_1" version="1.1" viewBox="0 0 145 145" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
        <path d="M95.727,56.11c-2.29-3.814-4.565-6.092-4.617-6.146c-0.48-0.48-2.289,1.668-2.791,2.309   c-0.762,0.981-2.563,2.625-6.367,4.876c-3.802,2.255-9.599,5.132-18.35,8.687c-3.747,1.524-6.766,3.085-9.192,4.666   c3.136-0.364,6.856-0.784,7.613-0.815c2.007-0.082-0.404,4.203-9.474,2.116c-1.186,0.895-2.195,1.796-3.047,2.699   c-1.388,1.474-2.355,2.959-2.971,4.422c-0.617,1.463-0.877,2.9-0.876,4.246c0.005,3.039,1.285,3.753,2.512,5.495   c1.234,1.746,3.872,2.962,3.872,2.962s-0.704-1.33-1.719-2.789c-1.022-1.463-1.976-3.455-1.971-5.668   c0.001-1.004,0.188-2.065,0.665-3.201c0.275-0.653,0.652-1.335,1.149-2.038c0.466,2.206,1.478,6.081,3.454,10.021   c1.499,2.98,3.555,4.208,6.406,6.524c2.844,2.317,6.521,5.686,11.017,5.679c0.11,0,0.221-0.001,0.332-0.003   c3.876-0.057,7.15-3.391,9.724-5.757c3.87-3.555,6.308-7.082,7.847-12.521c1.531-5.446,2.713-11.542,3.009-15.689   c0.522-7.306,0.163-10.061-0.246-11.266c0.572,0.787,1.188,1.696,1.808,2.743c2.096,3.534,4.127,8.399,4.123,13.856   c-0.002,3.122-0.653,6.447-2.35,9.907c-1.698,3.459-4.452,7.06-8.7,10.68c0,0,9.238-5.66,11.119-9.493   c1.882-3.831,2.628-7.595,2.626-11.095C100.33,65.29,98.012,59.922,95.727,56.11z M77.582,69h11.677C89.259,69,89.259,75,77.582,69   z"/>
        <path d="M53.943,97.604c-0.348-0.031-0.705-0.008-1.062-0.028c-0.212-0.012-0.425-0.001-0.633-0.02   c-3.854-0.352-6.887-1.923-8.909-4.354c-2.018-2.434-3.053-5.744-2.744-9.682l0.018-0.214c0.262-2.885,1.129-5.415,2.495-7.631   c1.367-2.215,3.437-3.863,5.531-5.702c7.384-6.483,14.57-10.075,21.95-13.905c4.245-2.203,8.488-4.594,12.651-7.22   c0.93-0.589,1.652-1.372,2.303-2.16c0.65-0.79,1.234-1.593,1.838-2.262c0,0-8.906,4.272-12.152,5.812   c-9.81,4.656-19.593,9.548-28.099,16.587c-3.033,2.512-5.808,5.679-7.739,9.131c-1.279,2.286-2.037,4.649-2.252,7.027   c-0.347,3.803,0.713,7.618,3.108,11.164c1.28,1.9,2.797,3.31,4.487,4.276c1.689,0.967,3.541,1.487,5.471,1.66   c1.797,0.162,3.675-0.072,5.585-0.411l7.056-1.355l-7.128-0.644C55.143,97.622,54.545,97.659,53.943,97.604z"/>
        <path d="M49.823,71.043c0.97,0.317,1.875,0.565,2.726,0.76c0.576-0.435,1.197-0.869,1.86-1.301   C51.934,70.79,49.823,71.043,49.823,71.043z" fill="#FFFFFF"/>
    </g>
</svg>

HTML5中的SVG

在《SVG简介与嵌入HTML页面的方式》一文中介绍了如何在HTML中引用.svg文件,让浏览器能显示SVG图像。虽然也能通过编辑器直接编辑.svg文件,然后引用到页面中,但我们更为关注的是如何直接在HTML中使用<svg>。简单点说直接使用<svg>相关元素绘制出自己需要的图形(当然,一些复杂的SVG图,不借助工具要实现是非常难的)。暂且不说如何使用<svg>绘制复杂图形吧。我们还是回到实际中来。假设我们有一个.svg文件,使用编辑器打开这个文件,可以看到上面代码区域所示的代码。接下来看看如何将这部分代码用到.html文件当中。

最简单的方法,你只需要将.svg中所有代码复制,然后粘贴到.html文件中,但有两点需要注意:

  • .html文件中,粘贴了.svg代码之后,要将SVG的XML声明删除

  • HTML文件应该使用HTML5的DTD

最终代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG绘制的MM头像</title>
</head>
<body>
    <svg enable-background="new 0 0 145 145" id="Layer_1" version="1.1" viewBox="0 0 145 145" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300">
        <g>
            <path d="M95.727,56.11c-2.29-3.814-4.565-6.092-4.617-6.146c-0.48-0.48-2.289,1.668-2.791,2.309   c-0.762,0.981-2.563,2.625-6.367,4.876c-3.802,2.255-9.599,5.132-18.35,8.687c-3.747,1.524-6.766,3.085-9.192,4.666   c3.136-0.364,6.856-0.784,7.613-0.815c2.007-0.082-0.404,4.203-9.474,2.116c-1.186,0.895-2.195,1.796-3.047,2.699   c-1.388,1.474-2.355,2.959-2.971,4.422c-0.617,1.463-0.877,2.9-0.876,4.246c0.005,3.039,1.285,3.753,2.512,5.495   c1.234,1.746,3.872,2.962,3.872,2.962s-0.704-1.33-1.719-2.789c-1.022-1.463-1.976-3.455-1.971-5.668   c0.001-1.004,0.188-2.065,0.665-3.201c0.275-0.653,0.652-1.335,1.149-2.038c0.466,2.206,1.478,6.081,3.454,10.021   c1.499,2.98,3.555,4.208,6.406,6.524c2.844,2.317,6.521,5.686,11.017,5.679c0.11,0,0.221-0.001,0.332-0.003   c3.876-0.057,7.15-3.391,9.724-5.757c3.87-3.555,6.308-7.082,7.847-12.521c1.531-5.446,2.713-11.542,3.009-15.689   c0.522-7.306,0.163-10.061-0.246-11.266c0.572,0.787,1.188,1.696,1.808,2.743c2.096,3.534,4.127,8.399,4.123,13.856   c-0.002,3.122-0.653,6.447-2.35,9.907c-1.698,3.459-4.452,7.06-8.7,10.68c0,0,9.238-5.66,11.119-9.493   c1.882-3.831,2.628-7.595,2.626-11.095C100.33,65.29,98.012,59.922,95.727,56.11z M77.582,69h11.677C89.259,69,89.259,75,77.582,69   z"/>
            <path d="M53.943,97.604c-0.348-0.031-0.705-0.008-1.062-0.028c-0.212-0.012-0.425-0.001-0.633-0.02   c-3.854-0.352-6.887-1.923-8.909-4.354c-2.018-2.434-3.053-5.744-2.744-9.682l0.018-0.214c0.262-2.885,1.129-5.415,2.495-7.631   c1.367-2.215,3.437-3.863,5.531-5.702c7.384-6.483,14.57-10.075,21.95-13.905c4.245-2.203,8.488-4.594,12.651-7.22   c0.93-0.589,1.652-1.372,2.303-2.16c0.65-0.79,1.234-1.593,1.838-2.262c0,0-8.906,4.272-12.152,5.812   c-9.81,4.656-19.593,9.548-28.099,16.587c-3.033,2.512-5.808,5.679-7.739,9.131c-1.279,2.286-2.037,4.649-2.252,7.027   c-0.347,3.803,0.713,7.618,3.108,11.164c1.28,1.9,2.797,3.31,4.487,4.276c1.689,0.967,3.541,1.487,5.471,1.66   c1.797,0.162,3.675-0.072,5.585-0.411l7.056-1.355l-7.128-0.644C55.143,97.622,54.545,97.659,53.943,97.604z"/>
            <path d="M49.823,71.043c0.97,0.317,1.875,0.565,2.726,0.76c0.576-0.435,1.197-0.869,1.86-1.301   C51.934,70.79,49.823,71.043,49.823,71.043z" fill="#FFFFFF"/>
        </g>
    </svg>
</body>
</html>

保存.html文件,然后使用浏览器,你将看到一个MM头像(这个头像是SVG图像),如下所示:

打开浏览器,查看代码,可以看到一大陀代码:

svg

如果你的浏览器看不到效果,请核查你的浏览器版本号,我们就不在纠结其浏览器的兼容性问题。

总结

.svg文件居然和.html文件一样,也有文档声明。文章中介绍了SVG文件的结构,主要包括哪些内容。其实对于Web人员来说,或许你还在担心自己不懂XML写不了SVG相关的东西。其实不用这么纠结,因为简单的图形可以直接使用<svg>相关元素与属性一起完成,对于复杂的图形还是需要借助一定的手段来完成。而这篇文章主要关注的是如何将做好的SVG图像与现在火爆的HTML5结合在一起使用。最后希望这篇文章对初学者有所帮助,在接下来的一节中,将与大家一起探讨SVG中的坐标系统。

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/svg1473436800819.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    什么机翻...

  • Web前端之家

    只是更轻便,还是有些差距的呢,小项目可以玩玩。...

  • ja124

    这个跟vue和react比,好些吗?...

  • Web前端之家

    OK,已经更新,谢谢!...

  • 韩涛博客

    韩涛博客的域名更换为www.hantaosec.com啦,请更新一下域名哈,谢谢。我还会继续链着咱们...

  • Web前端之家

    请持续关注Web前端之家。...

  • Y4K

    谢谢指导,这下背景问题解决了!...

  • Web前端之家

    要用起来才可以....

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.8 Valyria