Jump to content
You must now use your email address to sign in [click for more info] ×

Exported svg is not exporting color gradients


Recommended Posts

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

Screen Shot 2021-06-13 at 7.37.11 PM.png

Screen Shot 2021-06-13 at 7.36.08 PM.png

Screen Shot 2021-06-13 at 7.35.52 PM.png

trombone.svg

Link to comment
Share on other sites

Part of the problem was the white body on a white background, you also for some reason ended up with a white rectangle covering most of the design.

I cannot see on first look why the radial gradients are not working, I don't have the time to dig more into it. Hopefully the attached file will get you somewhere further along the debugging of this.

trombone.svg

Link to comment
Share on other sites

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.3.1.2217
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.2506.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.2506.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200, Windows 10 Pro, Version 21H1, Build 19043.2130.

Link to comment
Share on other sites

12 hours ago, Pšenda said:

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?

 

Screen Shot 2021-06-14 at 8.01.16 PM.png

 

Trombone.svg

Link to comment
Share on other sites

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

Screen Shot 2021-06-14 at 8.18.25 PM.png

Link to comment
Share on other sites

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

Export-Raster-Example-in-Browser.png

Link to comment
Share on other sites

4 hours ago, Samweow said:

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

Screen Shot 2021-06-14 at 8.18.25 PM.png

I didn't realise you had used layer effects - those aren't handled in export to svg. Your plan to use css is probably the best approach.

For the hair gradient you might have to get a bit creative and make it as a shape (perhaps with a Gaussian blur, one of the few fx that seem to work ok in svg). Rather than mask it to the hair, you may need to go the other way and draw the background colour as a shape to blank it out where it extends beyond the outside of the hair.

Link to comment
Share on other sites

3 hours ago, Brian_J said:

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 344.4 kB · 1 download

Export-Raster-Example-in-Browser.png

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.

3 hours ago, iconoclast said:

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.

They did that already :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.