Mobile app version of vmapp.org
Login or Join
Cooney243

: SVG saving issues with illustrator 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: Instead of

@Cooney243

Posted in: #AdobeIllustrator #Svg

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:



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


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




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"/>

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Cooney243

1 Comments

Sorted by latest first Latest Oldest Best

 

@Turnbaugh909

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme