如何在iOS应用程序中使用svg图像

时间:2014-05-19 07:42:32

标签: ios7 svg

我想删除我用于ios应用程序的.png文件,并添加.svg文件而不是那些文件。我怎么能在Xcode中做到这一点。我想使用svg图像作为背景和所有图标,按钮。

由于

2 个答案:

答案 0 :(得分:0)

简而言之:您必须转换为具有特定大小的PDF,Xcode(6+)将通过在编译时生成相应的@ 1x,@ 2x和@ 3x PNG来帮助您。 使用PDF的原因是因为PDF包含用作@ 1x png的像素大小的大小信息。 目前还没有本机运行时支持,虽然我听说过有关图书馆可以做到这一点的传言。

请参阅此答案:https://stackoverflow.com/a/25804358/3099609

引用的博文:http://martiancraft.com/blog/2014/09/vector-images-xcode6/

答案 1 :(得分:-8)

是!!!

自3.1版http://caniuse.com/svg

以来,IOS safari支持svg

我的理解是,ios支持将svg与图像标记http://phrogz.net/SVG/svg-via-img.html

一起使用

IE

<img src="myimage.svg"/>

一般来说,为了与早期的浏览器兼容,内联svg应该在像这样的xhtml文档中提供。

 <!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"><head> 
  <title>Create SVG Elements HTML</title>
  <style type="text/css" media="screen">
    body { background:#eee; margin:0 }
    svg {
      display:block; border:1px solid #ccc; position:absolute;
      top:5%; left:5%; width:90%; height:90%; background:#fff;
    }
    .face { stroke:#000; stroke-width:20px; stroke-linecap:round }
  </style>
</head><body>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="-350 -250 700 500">
    <circle r="200" class="face" fill="red" />
  </svg>
  <script type="text/javascript"><![CDATA[
    var svg  = document.getElementsByTagName('svg')[0];
    var svgNS = svg.getAttribute('xmlns');

    function createOn( root, name, attrs ){
      var el = document.createElementNS(svgNS,name);
      for (var attr in attrs){
        if (attrs.hasOwnProperty(attr)) el.setAttribute(attr,attrs[attr]);
      }
      return root.appendChild(el);
    }

    createOn( svg, 'path', {
      fill:"none", "class":"face", transform:"translate(-396,-230)",
      d:"M487.41,282.411c-15.07,36.137-50.735,61.537-92.333,61.537 \
        c-41.421,0-76.961-25.185-92.142-61.076"
    });
    createOn( svg, 'circle', { cx:-60, cy:-50, r:20, fill:'#000' });
    createOn( svg, 'circle', { cx: 60, cy:-50, r:20, fill:'#000' });
  ]]></script>
</body></html>

SVG文件应该使用mimi类型的&#34; image / svg + xml&#34;通常在服务器上配置,但svg可以与php包装器一起提供,以具有正确的mimi类型,如果服务器不是最新的mimi类型..

<?php
   header("Content-Type: image/svg+xml"); /* my host is to cheap to already support svg */
   include("mysvg.svg");
?>