Jump to content
eclecticthis

Transparent Text in SVG Files Doesn't Work

Recommended Posts

I have several svg images created in Inkscape with text of varying semi-transparency that I imported into Affinity Publisher, and then realized at the last moment that none of the transparency shows up in Publisher. They are all 100% opaque. Which creates a huge headache for me. 

Semi-transparent graphics/shapes work fine. It's only the font/texts that doesn't become semi-transparent. 

In the screenshot below the bottom "testing" words are semi-transparent—at least in the original file they are. But here they are opaque, while the semi-transparency on the circle shapes below them works just fine. 

I tried converting the text to "object to path", then re-saved the file, and that made so that the text then became transparent.

This doesn't make any sense to me. 

 

transparency text svg affinity publisher.jpg

Share this post


Link to post
Share on other sites

Interestingly, when the SVG file (svg_transparencies_from_ai.svg) attached above is opened in Affinity Publisher, and the transparency values have been reapplied manually, and the document is then exported as svg (with default "Export" options), the file opens correctly in Affinity Publisher, and renders also correctly e.g. in Chrome, but Illustrator messes up the transparencies!

So it seems to be pretty much a matter of encoding, and ability to support different encoding methods.

Affinity produced svg (attached) opened in Illustrator (CS6):

svg_apub_opened_in_ai.jpg.71ab2e3e202a19b55aba088453716cac.jpg

...and in Affinity Publisher:

svg_apub_opened_in_apub.jpg.b1870782766ba1e6608128c3f3e5ace4.jpg

 

svg_transparencies_from_apub.svg

Share this post


Link to post
Share on other sites

Hi eclecticthis,

When reporting issues like this PLEASE try to attach the source files you are showing or referring to, without these we can't fully investigate issues properly.

Looking at Lagarto's SVGs I can see that it is the 'opacity' attribute on text that is being ignored, instead we specifically look for 'fill-opacity'. This maybe something to do with the way we're mapping the 'opacity' attribute to a Layer's opacity, and the 'fill-opacity' attribute to the fill colour's opacity.

I will get this passed on to development to investigate. However if you could attach your SVG shown in the first post that will help us verify if that is the case, or there is another scenario we're missing.

Thanks.

Share this post


Link to post
Share on other sites

Note that circle in the example is encoded as... 

style="opacity:0.5;vector-effect:none;fill:#333333;fill-opacity:1;stroke:none;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"

...so it has both fill and outline specific definition (set to 1 here), and a generic definition for just ¨opacity', and this is correcly interpreted for graphic objects but not for text.

 

Share this post


Link to post
Share on other sites
6 hours ago, eclecticthis said:

Okay. I didn't know to do that. 

This file isn't exactly the same anymore as shown in the screenshot above, because I messed around with it some more after I had posted, but it's mostly the same. 

testing.svg

 

Thanks

Thanks for that - I can confirm it does look like those characters are using opacity on that text span, so it is the same issue. I've passed your file on to development.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

These are the Terms of Use you will be asked to agree to if you join the forum. | 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.