阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      SVG 入门

      简单的例子

      让我们直接从一个简单的例子开始,看一下下面代码:

      <svg version="1.1"
           baseProfile="full"
           width="300" 
           height="200"
           xmlns="http://www.w3.org/2000/svg">
        <rect width="100%" height="100%" fill="red" />
        <circle cx="150" cy="100" r="80" fill="green" />
        <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
      </svg>
      

      渲染效果如下


      SVG

      绘制流程解释:

      • 从svg根元素开始:
        • 应舍弃来自 (X)HTML的doctype声明,因为基于SVG的DTD验证导致的问题比它能解决的问题更多。
        • 属性version和属性baseProfile属性是必不可少的,供其它类型的验证方式确定SVG版本。
        • 作为XML的一种方言,SVG必须正确的绑定命名空间 (在xmlns属性中绑定)。 请阅读命名空间速成 页面获取更多信息。
      • 绘制一个完全覆盖图像区域的矩形 <rect/>,把背景颜色设为红色。
      • 一个半径80px的绿色圆圈 <circle/>绘制在红色矩形的正中央 (向右偏移150px,向下偏移100px)。
      • 绘制文字“SVG”。文字被填充为白色, 通过设置居中的锚点把文字定位到期望的位置:在这种情况下,中心点应该对应于绿色圆圈的中点。还可以精细调整字体大小和垂直位置,确保最后的样式是美观的。

      基本属性

      • 最值得注意的一点是元素的渲染顺序。SVG文件全局有效的规则是“后来居上”,越后面的元素越可见。

      • web上的svg文件可以直接在浏览器上展示,或者通过以下几种方法嵌入到HTML文件中:

        • 如果HTML是XHTML并且声明类型为application/xhtml+xml,可以直接把SVG嵌入到XML源码中。

        • 如果HTML是HTML5并且浏览器支持HTML5,同样可以直接嵌入SVG。然而为了符合HTML5标准,可能需要做一些语法调整。

        • 可以通过 object 元素引用SVG文件:

          <object data="image.svg" type="image/svg+xml" />
          
        • 类似的也可以使用 iframe 元素引用SVG文件:

          <iframe src="image.svg"></iframe>
          
        • 理论上同样可以使用 img 元素,但是在低于4.0版本的Firefox 中不起作用。

        • 最后SVG可以通过JavaScript动态创建并注入到HTML DOM中。 这样具有一个优点,可以对浏览器使用替代技术,在不能解析SVG的情况下,可以替换创建的内容。

        阅读this dedicated article 以深入了解该话题。

      • SVG如何处理大小和单位将在下一页详解。

      SVG 文件类型

      SVG文件有两种形式。普通SVG文件是包含SVG标记的简单文本文件。

      推荐使用 .svg(全部小写)作为此类文件的扩展名。

      由于在某些应用(比如地图应用等)中使用时,SVG文件可能会很大,SVG标准同样允许gzip压缩的SVG文件。

      推荐使用.svgz(全部小写)作为此类文件扩展名 。不幸的是,如果服务器是微软的IIS服务器,使gzip压缩的SVG文件在所有的可用SVG的用户代理上可靠地起作用是相当困难的,

      而且Firefox不能在本地机器上加载gzip压缩的SVG文件。 除非知道处理发布内容的web服务器可以正确的处理gzip,否则要避免使用gzip压缩的SVG。

      SVG web服务器设置HTTP头

      如果你已经知道了如何创建基本SVG文件,下一步就是把它们上传到web服务器,但是在这阶段有一些陷阱。对于普通SVG文件,服务器应该会发送下面的HTTP头:

      Content-Type: image/svg+xml
      Vary: Accept-Encoding
      

      对于gzip压缩的SVG文件,服务器应该会发送下面的HTTP头:

      Content-Type: image/svg+xml
      Content-Encoding: gzip
      Vary: Accept-Encoding
      

      可以利用 Network Monitor panel 或者 web-sniffer.net 之类的网站来检查服务器是否给SVG文件发送正确的HTTP头,向web-sniffer.net提交你的一个SVG文件的链接,然后查看HTTP 响应头。

      如果发现服务器没有发送上述的响应头部值,那么你应该联系你的服务器供应商。如果不能说服他们为SVG修正服务器配置,可能还有一些我们可以自行解决的办法。 请阅读SVG维基的server configuration page以找到一些简单的解决方案。

      服务器配置错误是SVG加载失败的常见原因,所以一定要确保你的服务器配置正确。

      如果不能把服务器配置成给SVG文件发送正确的响应头,这时Firefox很有可能把该文件的标记显示成文本或乱码,甚至会要求查看者选择打开文件的应用程序。

      目录
      目录