[Support request] How to use SVG as a button

[Michelle]

Hello all. I posted this at first as a question, and over the course of a few hours, figured out a solution to “How to use svg as a button”.

First Attempt: Using In An Image Block – FAIL
I started off by using image blocks with links to different pages on my Off Canvas Panel. The images are custom paint strokes that act as nav “buttons”:

https://imgur.com/HZLHiTJ

Image blocks work functionally with png and jpeg files, but svg files result in a blank file with no image. (I want to use svgs because they are clearer, and not fuzzy.)

Since svgs are normally used as icons, not as images, this method failed.

Second Attempt: Using A Button Block – FAIL
I tried to use buttons blocks instead, but did not see a way to add the svg as a background, only the option to use an svg as an icon.

Third Attempt: Using Custom-Classes and CSS – FAIL

https://imgur.com/sWGO7wO

https://imgur.com/Rw4n1d5

Fourth Attempt: Using a Plugin, SVG Support – FAIL
I installed and activated a plugin called SVG Support https://en-ca.wordpress.org/plugins/svg-support/ that is supposed to make svg files usable from the Media Library. I could not get it to work, although I think someone with more know-how could.

Last Attempt: Using an HTML Block – SUCCESS
After converting a png into an svg in Photoshop, I right clicked on the Photoshop layer of my svg file, and then on “Copy SVG”. I adjusted the size accordingly, and then pasted it into a custom html block inside of a container so I had control over the padding between buttons. Last, I linked the svg “button” to the page I wanted in the container block.

I’m sure there is a more streamlined way to achieve this, but wanted to share anyway. If there is a better way to do this, please let me know.

🙂 🙂

[Fernando]

Hi Michelle,

Here’s an article showing how to use Custom SVG icons in GenerateBlocks: https://docs.generateblocks.com/article/adding-custom-svg-icons/

For Headline and Button Blocks, you can opt to remove the text when you add an icon.

Hope this clarifies! 🙂

[Author]

Posts