exported SVG not displaying on website.

[Mr Lucky]

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

[Old Bruce]

Works fine here with BBEdit and Safari. Test.html

 

 

[David in Яuislip]

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

[Mr Lucky]

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)

[Mr Lucky]

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

[Mr Lucky]

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.