1

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

user2889249
  • 899
  • 2
  • 13
  • 22

2 Answers2

0

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/

Community
  • 1
  • 1
user3099609
  • 2,318
  • 18
  • 20
-10

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");
?>
Wayne
  • 4,760
  • 1
  • 24
  • 24
  • My app has written in Native objective c. Can I use svg for tht? – user2889249 May 19 '14 at 08:23
  • I don't have sample code for you in native OBJECTIVE C but this url has more information in that regard. http://mytechspace.com/2012/03/load-svg-images-in-iphone-ipad-using.html – Wayne May 19 '14 at 08:31