How can I use svg images within my iOS application

2019-09-17 10:40发布

站内问答 / 移动开发
753 2 4

I want to remove the .png files that I used for my ios app and add .svg files instead of those. How can I do in this in Xcode.I want to use svg images for backgrounds and all icons,buttons.

Thanks

标签： ios7 svg
举报
2条回答
太酷不给撩
2楼-- · 2019-09-17 11:35

In short: you'll have to convert to PDF with a specific size and Xcode (6+) will help you by generating the corresponding @1x, @2x and @3x PNGs at compile time. The reason why PDF is used is because PDF contains size information which is used as the pixel size for the @1x png. There's no native runtime support for it yet, though I've heard rumors of libraries that can do that.

See this answer: https://stackoverflow.com/a/25804358/3099609

And the referenced blog post: http://martiancraft.com/blog/2014/09/vector-images-xcode6/

查看更多
0人赞 添加讨论(0) 举报
混吃等死
3楼-- · 2019-09-17 11:44

YES !!!

IOS safari has svg support since version 3.1 http://caniuse.com/svg

It is also my understanding that ios supports using svg with an image tag http://phrogz.net/SVG/svg-via-img.html

IE

<img src="myimage.svg"/>

Generally speaking for compatibility with earlier browsers inline svg should be delivered in an xhtml document like this one.

 <!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 files should be delivered with a mimi type of "image/svg+xml" generally configured on the server already but svg can be delivered with a php wrapper to have the correct mimi type, if the server is not upto date on mimi types..

<?php
   header("Content-Type: image/svg+xml"); /* my host is to cheap to already support svg */
   include("mysvg.svg");
?>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)