[Support request] How to properly use SVG?

Home Forums Support How to properly use SVG?

This topic contains 3 replies, has 2 voices, and was last updated by  David 6 days, 12 hours ago.

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

    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.

    #1165083

    David 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.

    #1165743

    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?
    #1166007

    David Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.