🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Resolved] How to properly use SVG?

Home Forums Support How to properly use SVG?

Viewing 6 posts - 1 through 6 (of 6 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
    Staff
    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
    Staff
    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.

    #1191502
    Rodrigo

    Thanks David, for the help.

    The links and your feedback has been very useful.

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