How to properly use SVG?

[Rodrigo]

Hello Tom,

Hope you’re doing fine. I am working in a new website that use a SVG based style menu item and headers, and I’m not sure how should I use it properly with Generate Press.

I installed Safe SVG and uploaded the SVG images and activated the SVG Icon feature in GP. I can integrate them into the Menu and Page Headers (most common places for them). So my main question is whether I should use the <img> or <svg> tag.

1. Currently, I’m using <img> in the HTML of Page Headers and styling with CSS (change size, color and position), but I can’t change the color of the image with the fill or color attribute. The only way I can do it is using a filter attribute that doesn’t give me the exact color I want -I want black, and it renders dark gray.
2. I’m also using custom SVG images instead as menu icons for my Off-Canvas menu… Can I overlap one icon over another one (according to my design)?
3. If I use a <svg> tag, should I put the code directly into the HTML or just the reference to the svg file?

Thanks in advance for your help.

[David]

Hi there,

1. for your requirement you will need to use inline <svg>
2. I am not sure what you mean here – do you have an mockup image ?
3. Inlining SVG is not an issue. If you want to avoid adding this directly to your HTML then the SVG Support plugin provides an Inlining option – so you add an <img> and it inlines the output.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rodrigo]

1. So that will mean using the code from the svg files instead of calling to the file itself?
2. I do. Here’s the mockup: https://xd.adobe.com/view/329f78fb-4859-44ec-722a-ad651dda9ca0-44ae/screen/204b6f35-bccd-4c52-9db2-902648eb6073/Men-
3. This plugin does the same thing as putting the SVG code in the HTML, right?

[David]

1. Thats correct. You can use a site like this to optimize the code down:
https://jakearchibald.github.io/svgomg/

2. As they are ‘HTML’ elements you can use CSS Transform properties to achieve that:
https://www.w3schools.com/cssref/css3_pr_transform.asp

But overlapping clickable elements may create a UI problem.

3. Correct – without the need for a big block of code in your editor.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rodrigo]

Thanks David, for the help.

The links and your feedback has been very useful.

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts