- This topic has 5 replies, 2 voices, and was last updated 2 years, 10 months ago by
David.
-
AuthorPosts
-
February 13, 2020 at 10:49 pm #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.- 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 thefill
orcolor
attribute. The only way I can do it is using afilter
attribute 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 #1165083David
StaffCustomer SupportHi 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/February 14, 2020 at 3:09 pm #1165743Rodrigo
- So that will mean using the code from the
svg
files 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?
February 15, 2020 at 3:36 am #1166007David
StaffCustomer Support1. 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.aspBut 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/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 #1191705David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ - Currently, I’m using
-
AuthorPosts
- You must be logged in to reply to this topic.