- This topic has 5 replies, 2 voices, and was last updated 2 years, 10 months ago by David.
February 13, 2020 at 10:49 pm #1164834Rodrigo
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
- 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
colorattribute. The only way I can do it is using a
filterattribute that doesn’t give me the exact color I want -I want black, and it renders dark gray.
- 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)?
- 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.February 14, 2020 at 5:03 am #1165083DavidStaffCustomer Support
1. for your requirement you will need to use inline
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.February 14, 2020 at 3:09 pm #1165743Rodrigo
February 15, 2020 at 3:36 am #1166007DavidStaffCustomer Support
- So that will mean using the code from the
svgfiles instead of calling to the file itself?
- I do. Here’s the mockup: https://xd.adobe.com/view/329f78fb-4859-44ec-722a-ad651dda9ca0-44ae/screen/204b6f35-bccd-4c52-9db2-902648eb6073/Men-
- This plugin does the same thing as putting the SVG code in the HTML, right?
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.March 10, 2020 at 10:32 pm #1191502Rodrigo
Thanks David, for the help.
The links and your feedback has been very useful.March 11, 2020 at 4:31 am #1191705
- Currently, I’m using
- You must be logged in to reply to this topic.