I’m generating a svg image from a bmp image with potrace. The generated image shows fine in Illustrator, but when I try to show it with SVGKit on an iPad it loads a blank image.
SVGKit works with svg-images I’ve created with Illustrator.
To simplify things I have created a bmp image with a simple black line.
This is what Illustrator generates (SVGKit does show this correct):
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1024px" height="768px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
<g>
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M1,0c341,0,682.001,0,1023,0c0,255.995,0,512.006,0,768
c-341.333,0-682.667,0-1024,0C0,513,0,258,0,3C-0.086,1.581-0.165,0.168,1,0z M160,391c0,5.667,0,11.333,0,17
c204.999,0,410,0,615,0c0-6.667,0-13.333,0-20c-204.661,0-409.337,0-614,0C159.835,388.168,159.914,389.581,160,391z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M161,388c204.663,0,409.339,0,614,0c0,6.667,0,13.333,0,20
c-205,0-410.001,0-615,0c0-5.667,0-11.333,0-17C159.914,389.581,159.835,388.168,161,388z"/>
</g>
</g>
</svg>
This is what potrace generates (SVGKit does not show this correct, but Illustrator does):
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="1024.000000pt" height="768.000000pt" viewBox="0 0 1024.000000 768.000000" preserveAspectRatio="xMidYMid meet">
<metadata>
Created by -protrace define- -version define-, written by Peter Selinger 2001-2011
</metadata>
<g transform="translate(0.000000,768.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M1600 3700 l0 -100 3075 0 3075 0 0 100 0 100 -3075 0 -3075 0 0 -100z"/>
</g>
</svg>
So as far as I can see there is some differences in the headers, but even if I use the exact same header from Illustrator’s result in potrace’s result, SVGKit still can’t show it.
What is wrong/different with potrace’s result since SVGKit can’t show it?
It’s the transforms. The core build of SVGKit doesn’t support transforms.
My experimental branch (which will eventually be merged into core) has good support for transforms – it includes Matrix, Translate … I’m not sure about Scale (it would only take a few minutes to add if it’s missing – if you do a search for “matrix” I think you’ll find the code quickly.
NB: this branch changes the syntax for loading an SVG. It’s a lot simpler, but you have to call a different class (SVGKImage). Full instructions on the README at bottom of page:
https://github.com/adamgit/SVGKit/tree/transforms