[Resolved] How to properly use SVG?

Home Forums Support [Resolved] How to properly use SVG?

Home Forums Support How to properly use SVG?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1164834

    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.

    Customer Support

    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.

    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?
    Customer Support

    1. Thats correct. You can use a site like this to optimize the code down:

    2. As they are ‘HTML’ elements you can use CSS Transform properties to achieve that:

    But overlapping clickable elements may create a UI problem.

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


    Thanks David, for the help.

    The links and your feedback has been very useful.

    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.