SVG saving issues with illustrator

Question

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.

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

Answer 1

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.