SVG Files

scott74 · July 2020

I have a logo on this site. in the header and in the footer when you save the logo from the site and look at it in note pad the header has PNG to start the file.

When I use the same logo as a background in the middle of the site itd super crisp and when you save that one an open in notepad the header says SVG

I had to upload the SVG to cloudinary first for it to work on the site. Is there something special you have to do to keep the logo from rendering out as PNG for the logo area?

Thanks.

https://staging2.campbellsecuritygroup.com/

Pablo · July 2020

Hello,

I do not quite understand, for now I see that your header logo is webp (for retina svg), and footer is svg.

And it saves correctly, to the formats they are already on the page.

Did you solve the problem?

Thanks

scott74 · July 2020

I think so. Was not able to directly upload svg and use via WP but can using cloudinary link and think have to play with some settings there to optimize.. Thanks

scott74 · July 2020

So They provided me with a way to sanitize the URL . It works everywhere in the theme except the logo inputs... I have in the footer using just HTML where it shows well.. When using in the theme logo area or using with CSS for a background it will not display on the site.. puzzled

https://res.cloudinary.com/dqwzka5cv/image/upload/q_auto,fl_sanitize/v1595772225/campbellsecurity/cambellsecuritygroup-flat-logo.svg

Any advice..? Thanks

scott74 · July 2020

I figured this out.. Looks like you have to add a width to the SVG settings in the theme otherwise it will not show.. Says its optional, might be mandatory

i did noticed this push my logo from far left on mobile phone though so had to add CSS for mobile..

img.logo-mobile.scale-with-grid.svg{

width: 50px !important;

}}

Maybe adding that settings here would help for mobile
https://res.cloudinary.com/dqwzka5cv/image/upload/v1595884094/svg_lnpnvr.jpg

Pablo · July 2020

Yes, indeed - you have to insert the height value for the svg logo, it's really necessary.

If you have some other questions, feel free to ask.

thanks

SVG Files

Comments