Exported svg is not exporting color gradients

[Samweow]

I'm exporting my vector graphic as an svg. When I open  the svg in Firefox or Google Chrome most of the colour is missing. I think all the missing colour is the gradients

My SVG is filled with stuff like

fill:url(#_Radial2)

but I can't find anywhere in the file where #_Radial2 specifies a colour

Unchecking "flattern transforms", "use hex colours", or use "relative coordinates" had no effect

---------------

I uploaded screenshots of my export settings, as well as what the SVG looks like in a browser, and also the SVG file itself

trombone.svg

[Samweow]

Well it shouldn't quite be a white background, there's inner shadows, and none of those inner shadows are visible

[Pšenda]

Try to look here:
https://www.google.com/search?q=svg+gradient+site%3Ahttps%3A%2F%2Fforum.affinity.serif.com

 

[Samweow]

11 hours ago, BofG said:

Have you tried pasting the selection into a new document and then exporting the full document rather than exporting the selection?

Same result

[Samweow]

12 hours ago, Pšenda said:

Try to look here:
https://www.google.com/search?q=svg+gradient+site%3Ahttps%3A%2F%2Fforum.affinity.serif.com

 

I didn't really understand what that post was talking about, but i tried double clicking the gradient circles and it didn't fix it.
It turns out that if I get rid of the mask on that cheek blush layer, then the gradients are visible but not the inner/outer shadows. Is there any way to make the inner/outer shadows visible?

 

 

Trombone.svg

[Samweow]

I guess for my purposes, because I'm just injecting this into html, I could probably just use a css box-shadow

But there's also a line on the hair which is much less visible inn designer. I think it might be due to this layer.
If you open the svg, you'll see what I mean

[Brian_J]

I think the issue is with the "Rasterize Nothing" in your export settings. Some things can't be exported as vector -- I believe this includes all layer effects. I'm guessing the inner shadows need to be rasterized. All the raster data will be included in the SVG file.

Try using the Rasterize setting Unsupported properties.

The attached AD file was saved with the unsupported properties rasterized.

Export Raster Example.afdesign Export-Raster-Example.svg

[iconoclast]

Could it be that, because in the Export dialogue "Selection only" is selected, only the objects that are actually selected will be exported? Try to export the whole document.

[Brian_J]

2 minutes ago, BofG said:

That's no different to exporting as a raster format though, it's just a bitmap wrapped in an svg. I assume the OP wants a vector out of this.

@BofG Ya, if the OP wants a pure vector graphic, the file will have to be edited. I was just pointing out how the existing graphic can be exported in SVG format, which saves the vector objects and include PNG data for the layer effects.

[Samweow]

I had to add this filter to the defs of my svg,  and add this to a bunch of my paths filter="url(#inset-shadow)"

  <filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%">

    <!-- change this to desired inset blur colour -->
    <feFlood x="0%" y="0%" width="100%" height="100%" flood-color="black" result="flood"/>
    <!-- cut a hole out of the flood fill where out shape is -->
    <feComposite operator="out" in="flood" in2="SourceAlpha" result="outside" />

    <!-- stack blurs to get a better effect -->
    <feGaussianBlur in="outside" result="blur" stdDeviation="5" />
    <feGaussianBlur in="outside" result="blur2" stdDeviation="10" />
    <feGaussianBlur in="outside" result="blur3" stdDeviation="15" />
    <feMerge result="blur">
        <feMergeNode in="blur" mode="normal" />
        <feMergeNode in="blur2" mode="normal" />
        <feMergeNode in="blur3" mode="normal" />
    </feMerge>

    <!-- clip the full blur against the shape to retain just the part inside our shape -->
    <feComposite operator="in" in="blur" in2="SourceGraphic" result="inset-blur" />
    <!-- blend with our original graphic to create the final resul -->
    <feBlend in="SourceGraphic" in2="inset-blur" mode="multiply"/>
  </filter>

You can see the svg here if you want http://jsfiddle.net/samgermain/j4g2cLve/7/