1

I'm having an issue with how illustrator is saving out one of my SVG's. This is how the image looks in illustrator and when I export to JPG:

enter image description here

Instead of rendering like this I get two issues when the image displays in the browser.

  1. the font doesn't render out properly and 2. the shadows have a weird whitish background:

enter image description here

not sure what im doing wrong here. SVG code just for shadows:

<linearGradient xmlns="http://www.w3.org/2000/svg" id="XMLID_96_" gradientUnits="userSpaceOnUse" x1="172.5894" y1="186.4131" x2="-108.067" y2="-83.2463">
    <stop offset="0" style="opacity: 1;stop-color:#FFFFFF;"/>
    <stop offset="1" style="stop-color:#000000;stop-opacity:0;opacity: 0;"/>
</linearGradient>
<path xmlns="http://www.w3.org/2000/svg" id="XMLID_330_" class="st10" d="M127.568,251.982v1h1l0,0h221.385c-0.113,0-0.24,0-0.395,0h-0.063  c-0.113-0.551-152.379-153-152.938-153h-0.063c-0.113-0.551-0.379-1-0.938-1h-7.385c-0.807,0-1.605,0.93-1.605,1.76v10.998  c0-0.665-0.301-0.758-0.85-0.758h-1.166c-0.033-0.554-0.406-0.854-0.988-0.953c-0.012-0.588-0.4-0.898-1-1  c-0.012-0.588-0.4-0.898-1-1c-0.012-0.588-0.4-0.898-1-1c-0.012-0.588-0.4-0.898-1-1c-0.016-0.729-0.594-1.047-1.459-1.047h-4.734  c-0.205-0.417-0.557-0.771-0.959-0.919c-0.199-0.452-0.57-0.842-1-1c-0.199-0.452-0.57-0.842-1-1c-0.199-0.452-0.57-0.842-1-1  c-0.199-0.452-0.57-0.842-1-1c-0.258-0.587-0.809-1.081-1.393-1.081h-7.385c-0.809,0-1.066,0.93-1.066,1.76v11  c0-0.666-0.842-0.759-1.391-0.759h-0.623c-0.045-0.43-0.465-0.712-0.986-0.862v-0.066c0-0.473-0.449-0.775-1-0.934v-0.066  c0-0.473-0.449-0.775-1-0.934v-0.066c0-0.473-0.449-0.775-1-0.934v-0.066c0-0.473-0.449-0.775-1-0.934v-0.066  c0-0.75-1.125-1.072-2.002-1.072h-5.086h-0.002c-0.137-0.551-0.441-1-0.998-1h-0.002c-0.137-0.551-0.441-1-0.998-1h-0.002  c-0.137-0.551-0.441-1-0.998-1h-0.002c-0.137-0.551-0.441-1-0.998-1h-0.002c-0.137-0.551-0.441-1-0.998-1h-0.002  c-0.137-0.551-0.441-1-0.998-1h-7.387c-0.809,0-1.525,0.93-1.525,1.76v8.268c-0.047-0.011-0.092-0.026-0.141-0.026  c-0.188-0.524-0.549-1.001-1.006-1.001h-6.131c-0.668,0-0.723,1.026-0.723,1.724v1.299v2.229v2.558v10.135v29.397  c0,0.695,0.055,1.658,0.723,1.658H48.568v6h1v1h1v1h1v1h1v1h1v1h1v1h1v1v11h1L127.568,251.982z"/>
4
  • How are the gradients set up in Illustrator? (Blending modes?)
    – Cai
    Aug 7, 2016 at 19:40
  • 1
    Also since we're talking about SVG it's always worth posting the code (or at least some of the relevant parts)
    – Cai
    Aug 7, 2016 at 19:41
  • the graadients are setup as so: Gradient Linear from black to white with black being 100% opacity and white being 0%. The transparency is set to 50% and multiply. When I change it from multiply to normal it actually gives me the result that is shown in the second image (the undesired result) Aug 7, 2016 at 20:07
  • have added the svg code for the shadows above Aug 7, 2016 at 20:11

1 Answer 1

0

The Gradient & Blending Modes

Illustrator will not output any blending modes in your SVG. You can use blending modes in SVG either using CSS blending modes or SVG filters, but that will mean writing the code yourself instead of relying on Illustrator.*

You can refer to my answer to this previous question for more info: Export to SVG with blend mode or "Apply" it.

Since all you need is a regular gradient you don't really need the blending mode though. Just replace the white in your gradient with the same color as your background and remove the blending mode. (Quick tip: instead of changing your gradient you can select the background and your gradients and go to Object → Flatten Transparency, which will do the job for you).

The Type

Unless you have the correct font installed on your computer or the web-font loaded in your CSS (with @font-face) and referenced correctly in the styles in your SVG/CSS then you will not get the correct font on any live type objects.

Since it's part of an illustration you probably don't need the text as a live type object though so just right click in Illustrator and select Create Outlines, which will convert your text to vector path objects. Or you can choose "Convert to outline" in the SVG export dialog which should do the same thing.

(If you really do need the text to be live type you'll need to show the relevant SVG and CSS code.)


* As far as I'm aware. I'm using CS6 so maybe things are different in CC but I don't think so.

At least consistently. There are other options for exporting fonts in SVG in Illustrator but none are well supported.

1
  • No problem at all Ben, glad to help
    – Cai
    Aug 7, 2016 at 21:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.