Use of SVG's in Cornerstone with X Pro

I looked and I only find really old articles on this but does the X Pro Theme and Cornerstone not support SVG’s even if we add a plugin to the site that enables support?

I find that even though I can add the SVG to the media library when I try to add that into a Cornerstone element it does not work.

Hi @klevur,

Thanks for reaching out.
SVG is actually a tag, which is a pure XML and can’t be assigned to another tag. I would suggest you copy the URL from the Media and use it as an Image src in Text or Raw Content element as shown in the screenshot.

I would also suggest you to go through the following links on how you can use the SVG.


Hope it helps.
Thanks

Are you saying you can’t simply add an SVG to the Logo(image) section of theme options? I don’t understand why the theme doesn’t adjust all of that without making the user resort to custom code and a reference to the css-tricks site. Most themes now support SVGs as logos seamlessly.

Hello Dimitry,

You can actually use the SVG directly as your logo image. It just that at times, other browsers may render your logo incorrectly.

Hope this helps.

Thank you but when I select an SVG as a logo image in logo field, nothing happens. :pensive: No error message, just nothing. Not a good user experience for something so common.

Cornerstone can’t vaunt it’s header builder etc and not inherently support SVGs and even png backups for icons, logos, menu graphics etc. Asking users to build a manual link to an an SVG as a work around is just daft. There should be normal logo, fixed logo, transparent/reverse logo, mobile logo alternatives built-in as well. This would save a ton of unnecessary work by users.

@studio2urn I’m just a user chiming in. I use SVG’s everywhere, including headers, content, footers and even in those Menu navigation positions. I don’t think anything is wrong with the theme.

WordPress does not allow uploading SVG’s due to security reasons. You can install the “Safe SVG” plugin which would allow uploading them. Alternatively, you can drop the SVG code in any text element such as the Raw content.

SVG’s need styling if dropped as code. To minimum you need to define the width of it to properly render.

1 Like

Hello Dimitry,

Please note WordPress doesn’t support SVG files. Please have a look at this article to learn more about media supported by WordPress.

You can use this WordPress plugin SVG Support, It would allow you to upload the SVG image files.

After installing the plugin you will be able to upload the SVG image file then you can easily set the logo as an SVG image.

Hope it helps
Thanks

1 Like

Thanks you all so much for clarifying; your persistence and patience is so appreciated!

OK, here is what happened: I had existing SVG files already in my dev site’s media library uploaded from a prior theme that does have built-in SVG support. So, I didn’t need to upload them again (and thus didn’t have the Safe SVG or other similar plugin installed) when attempting to attach the logo. In that scenario there is no error message–it just fails silently. Thus my frustration and semi rant. Perhaps a message saying install svg support plugin or an article to that effect in docs wouldn’t hurt.

Now that I have installed Safe SVG Cornerstone is working as expected and I am delighted.

Glad to hear it’s working now.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.