如何在我的 iOS 应用程序中使用 svg 图像答案

【问题标题】：How can I use svg images within my iOS application如何在我的 iOS 应用程序中使用 svg 图像
【发布时间】：2014-05-19 07:42:31
【问题描述】：

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

谢谢

【问题讨论】：

标签： ios7 svg

【解决方案1】：

简而言之：您必须转换为特定大小的 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/

【讨论】：

【解决方案2】：

是的！！！

IOS safari 从 3.1 版开始支持 svg http://caniuse.com/svg

据我了解，ios支持使用带有图片标签http://phrogz.net/SVG/svg-via-img.html的svg

<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 类型“image/svg+xml”交付，但如果服务器不是最新的，则可以使用 php 包装器交付 svg 以获得正确的 mimi 类型咪咪类型..

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

【讨论】：

我的应用程序是用 Native Objective c 编写的。我可以使用 svg 吗？
我没有在本机 OBJECTIVE C 中为您提供的示例代码，但这个 url 在这方面有更多信息。 mytechspace.com/2012/03/…