svg Trouble

[aisforayana]

I am using Affinity Designer to create a poster for work that will be 36” x 54”.  I had a png file of our logo that I was going to put on the poster, but after scaling, it was too small to be stretched that much, plus the colors were a bit off when converted to CMYK.  I asked our marketing director for a vector version of the graphic, and she asked the person who made the logo.  I was sent an eps file, and there were weird lines and broken shapes that made the gradient weird and the logo kinda wonky.  So I just asked for an svg, because I thought you just couldn’t go wrong with an svg.  But it is opening very inconsistently in different programs and I cannot get it to display correctly in Affinity Designer.  At this point, I am about to pull my hair out.

 

Image 1 is the png file and the correct way the logo should look.

 

Image 2 is a closeup of one of the wonky spots on the eps file when opened in Designer (the horizontal line on that leaf should not be there, it should be one continuous shape and gradient, see png).

 

Image 3 is how the svg opens in Google Chrome (looks almost correct, would be acceptable if I could even just get it to look like this in Affinity Designer).

 

Image 4 is how the svg opens in Affinity Designer (looks very wrong).

 

Image 5 is how the svg opens in Sketch (also looks very wrong).

 

Image 6 is how the svg opens in Inkscape (still wrong).

 

I have also attached the svg file.  Please help!!!!!  Is it normal for an svg file to appear so inconsistently across various platforms?  What can I ask for in graphic-design-speak to get what I need (a vector with a transparent background that can be enlarged infinitely)??

 

Thanks!

 

[firstdefence]

The only way I could get this to look better was to open the SVG in Adobe Illustrator and save as... a PDF then open in Affinity Designer.  

Even in Adobe Illustrator the image didn't look right with one of the leaves displaying as a dark green brown, I looked through the layers and turned off the offending layers with no adverse affects that I can see. see images below...

Before

After

I think the turned off group is for shading but for some reason when the file is opened it isn't being interpreted correctly.

As a side note and for future reference, it would be courteous to ask the original creator of this image if you could upload this to a public forum. If my solution works for you I would suggest you remove the SVG from this post and I will remove the PDF I have uploaded, I have already deleted the files I have on my iMac.

There is a lot of work in this file and I can appreciate the skills and time invested in creating this image.

Affinity likes PDF files more than SVG. So ask for PDF files instead of SVG in future.

 

[aisforayana]

INFINITE THANKS!!!  This worked perfectly!  In the future, I will try to get ahold of the designer before I post, thanks for the advice.  I definitely don't intend to disrespect anyone's work.  I will delete the svg, and I have downloaded your pdf, so feel free to delete.

 

Out of curiosity, do you know of a reason that an svg file would display so inconsistently across various platforms?  Is that a stupid question with an obvious answer?  Does it just have to do with the fact that every program reads the code in a slightly different way?  (Though that would seem to defeat the purpose of the file format.)  I have never had trouble with svg files in the past.  Just curious!

 

Thank you again!!!!!!!

[firstdefence]

50 minutes ago, aisforayana said:

Out of curiosity, do you know of a reason that an svg file would display so inconsistently across various platforms?  Is that a stupid question with an obvious answer?  Does it just have to do with the fact that every program reads the code in a slightly different way?  (Though that would seem to defeat the purpose of the file format.)  I have never had trouble with svg files in the past.  Just curious!

SVG files are written in XML code, each app will have a variation of the code or use a different way of using the available elements and the elements attributes. Basically there are several ways of drawing a circle, it's up to the developers of the app which method they choose.

So as an example <SVG> is an element and the width and height are the SVG elements attributes.

As an example All of these SVG codes will draw a red circle 200px in diameter. these examples are just to show code variations and are not exact comparisons.

Affinity Designer SVG Code

	<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE
svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%"
height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><circle cx="100" cy="100" r="100"
style="fill:#f00;"/></svg>

 

Sketch 51.3 SVG Code

<?xml version="1.0" encoding="UTF-8"?>
<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
    <title>Oval</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <circle id="Oval" fill="#FF0000" fill-rule="nonzero" cx="100" cy="100" r="100"></circle>
    </g>
</svg>

Illustrator CC 2018 SVG Code

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><style>.cls-1{fill:#e52622;}</style></defs><title>illy oval</title><circle class="cls-1" cx="100" cy="100" r="100"/></svg>

Inkscape SVG Code

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1"
   id="svg8"
   inkscape:version="0.92.2 5c3e80d, 2017-08-06"
   sodipodi:docname="drawing.svg">
  <defs
     id="defs2" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="-172.85714"
     inkscape:cy="560"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="2560"
     inkscape:window-height="1344"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <circle
       style="opacity:1;fill:#ff0000;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="path815"
       cx="64.255959"
       cy="80.041672"
       r="26.458334" />
  </g>
</svg>

 

[Medical Officer Bones]

This SVG file is quite problematic: I've opened it in various editors, and none open it completely correct. As stated, even Illustrator gets it wrong with that one leaf. Only the browsers process and render that file correctly.

Quick tip for anyone not having access to Illustrator to fix a problematic SVG file: install the Opera browser (https://www.opera.com/) and open the SVG file in it. Right-mouse click the view, and choose "Save as PDF".

This will fix all (or 99% of) issues. It depends on the PDF importer of your app whether the dark leaf will be imported correctly, though. Affinity Photo (and I am guessing Designer as well) do not support the soft dark mask that is required for the top right dark leaf. It is relatively easily fixed (just like in Illustrator) in Photo, though.

I did some more testing for fun, and found that Krita, PhotoLine and Gravit Designer all deal differently with this SVG file as well - and the results are all over the place. Krita's version sort-of explodes. :-)

After converting the file to PDF with Opera, all applications, including InDesign (which does not support SVG files) import it correctly, excepting the dark leaf at the top right. Every single application I tried the PDF with gets that top right leaf wrong, but for PhotoLine which (surprisingly) is the only app among the ones that I tested which gets it right.

That particular leaf is created with a hollow shadow mask that is misinterpreted or unsupported by most of the design software. Interestingly enough when I re-save the PDF version in PhotoLine, it corrects this error, and all other applications then import the pdf without any visual issues, and the leaf mask issue is resolved. At the expense of editability, unfortunately. Sigh, can't have it all, I guess.

Resaving the file from PhotoLine as an SVG and importing the result in Affinity also works well, although that darn leaf still refuses to be shaded correctly. I checked the result and that leaf's shading is rather complex, which would explain why most software seems to choke on it. They all, expect the browsers and PhotoLine after conversion to PDF, miss that transparent image overlay with the soft shading mask.

Check it out below.

Anyway, in short: use Opera to save a PDF version, and it will work fine (excepting that darn leaf) in Affinity.

PS Xara Designer Pro and Gravit Designer both import the SVG with mixed results,  both rendering it incorrectly. As mentioned by the OP, Inkscape's SVG import results in a weird translucent version, but Inkscape does import the PhotoLine SVG re-saved version without issues, though. Neither Xara nor Gravit support PDF, however, so no go for those two.

[firstdefence]

Nice research work @Medical Officer Bones would be interesting to know which software this File was designed in and exported from?

It is easy enough to group all the bits of that leaf and apply an inner shadow to the group to get the shadow effect back.

[aisforayana]

@firstdefence thanks for the detail on svg, very interesting.

@Medical Officer Bones thank you for diving so deep into this file, and thank you for the workaround!  I have Opera, but did not know about this feature.  With your method, I was able to open the pdf in Designer and turn off that odd leaf shading to get what I needed.  Good to know for the future if I ever run into anything like this again.

 

You have both been very helpful, thank you so much!!!