Jump to content
Mr Lucky

exported SVG not displaying on website.

Recommended Posts

I have created a logo which is vector and text.

I am exporting using SVG (for export) with Export text as curves ticked so it should be 100% vector.

However the logo does not show up on my site. I have the correct path in the code. I have checked because there is an identically named png image, and I can change the extension in the code to png and it displays fine, back to svg and it disappears.

However the image does display if I link to it directly in the browser although some of the appears to be a bit pixelly, as if it is rasterized (just the brown word OTRA which is a font converted to curves). And the stroke varies in width.

https://otra.org.uk/otralogo2020.svg

Does anyone know what I might be doing wrong, any help greatly appreciated.

Code:

 

<!--shows--><a href="https://otra.org.uk"><img src="https://otra.org.uk/otralogo2020.png" alt="OTRA" /></a>

<!--does not show--><a href="https://otra.org.uk"><img src="https://otra.org.uk/otralogo2020.svg" alt="OTRA" /></a>

(size is defined in CSS)

 

otralogo2020.svg

Share this post


Link to post
Share on other sites

Works fine here with BBEdit and Safari. Test.html

 

 

Screen Shot 2020-10-11 at 11.06.18 AM.png


MacBook Pro (13-inch, Mid 2012) Mac OS 10.12.6 || Mac Pro (Late 2013) Mac OS 10.14.6

Affinity Designer 1.8.6 | Affinity Photo 1.8.6 | Affinity Publisher 1.8.6 | Beta versions as they appear.

Share this post


Link to post
Share on other sites
1 hour ago, Mr Lucky said:

so it should be 100% vector.

I'm afraid that it's not. If you open the svg with a text editor you'll see

 <image id="_Image1" width="135px" height="59px" xlink:href="data:image/png;base64,.... etc 

This is the OTRA in brown which has been rasterised. Common culprits are Layer fx. You could try exporting with rasterise set to nothing


Microsoft Windows 10 Home, Intel i7-9750H CPU @ 2.60GHz, 16 GB RAM, 500GB SSD, 1TB Whirlygig, NVIDIA GeForce RTX 2060
Affinity Photo - 24/05/20, Affinity Publisher - 06/12/20, KTM Superduke - 27/09/10

Share this post


Link to post
Share on other sites
1 hour ago, David in Яuislip said:

This is the OTRA in brown which has been rasterised. Common culprits are Layer fx. You could try exporting with rasterise set to nothing

Aha that will explain it - I didn't realise a colour overlay might do that. But exportRaster DPI was set to nothing

But it'seasy enough to remove the colour overlay from the group and use a fill on each letter instead.

In fact come to think of it  I don't even need to convert the text to curves as well, I didn't do anything apart from resize. (However probably best to tick export text as curves anyway I suppose)

Share this post


Link to post
Share on other sites
18 hours ago, Old Bruce said:

Works fine here with BBEdit and Safari. Test.html

yes, I've narrowed it down now to not working in a wordpress custom html widget. It mat be a gerenarl wordrpress widget issue or maybe it is my theme. need to do a bit more troubleshooting

Share this post


Link to post
Share on other sites
3 hours ago, Mr Lucky said:

yes, I've narrowed it down now to not working in a wordpress custom html widget. It mat be a general wordrpress widget issue or maybe it is my theme. need to do a bit more troubleshooting

In fact it was totally user error, or user ignorance.

 

The CSS I had was

max-width:200px;height:auto

Which of course is fine for a png, but the max- width with a SVG was causing it to not show (or maybe it was but 0px x 0px.

Share this post


Link to post
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

Please note the Annual Company Closure section in the Terms of Use. 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.