mozilla
您的搜索结果

    Getting Started

    这篇翻译不完整。请帮忙从英语翻译这篇文章

    一个简单的示例

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

    <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>
    

    复制并粘贴代码到文件demo1.svg。然后用Firefox打开该文件。 它将会按下图渲染。(Firefox用户点击这里)

    svgdemo1.png

    绘制流程包括一下几点:

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

    SVG文件的基本属性

    • 最值得注意的一点是元素的渲染顺序。SVG文件全局有效的规则是 后面的元素渲染在之前元素的上方,越靠下的元素越可见。
    • web上的svg文件可以直接被浏览器展示或者通过几种方法嵌入到HTML文件中:
      • 如果HTM是XHTML并且声明类型为 application/xhtml+xml, SVG可以直接被嵌入到XML源码中。
      • 如果HTML是HTML5并且浏览器支持HTML5SVG同样可以被直接嵌入。然而为了符合HTML5标准,可能需要一些语法调整。
      • SVG文件可以通过 object 元素引用:
                <object data="image.svg" type="image/svg+xml" />
      • 类似的也可以使用 iframe 元素:
                <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时,使所有有能力处理SVG的用户代理通过gzip压缩的SVG文件可靠工作是相当困难的,并且Firefox不能在本地机器上加载gzip压缩的SVG文件。 除非知道处理发布内容的web服务器可以正确的处理gzip,否则要避免使用gzip压缩的SVG。

    关于web服务器的小提示

    当你有一个如何创建基本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

    可以通过网站比如web-sniffer.net来检查服务器是否发送正确的HTTP头,提交你的一个SVG文件的链接查看HTTTP 响应头。如果发现服务器没有发送上述的响应头部值,那么你应该联系你的服务器供应商.如果不能说服他们修正SVG配置,也许有一些办法我们可以自行解决。 通过维基百科的 server configuration page查找一些简单的解决方案。

    服务器配置错误是SVG加载失败的常见原因,所以一定要确保你的服务器配置正确。如果服务器不能对发送SVG文件响应头的配置错误,这时Firefox最可能展示标签文件为 文本或者乱码,甚至会要求查看者选择打开文件的应用程序。

    文档标签和贡献者

    此页面的贡献者有: dolphinX
    最后编辑者: dolphinX,