: Illustrator SVG for web using CSS to supply the color for different scenarios Non-GD or web developer. I'm in Marketing with limited skills in both fields. We work with web developers (not original
Non-GD or web developer. I'm in Marketing with limited skills in both fields. We work with web developers (not original site designers). Having trouble figuring this out.
We are adding an additional icon to our site, and I am wondering if there are certain settings when saving the SVG.
The icon is supposed to inherit its color from the CSS, so is there a special way I'm supposed to save the SVG to easily allow the CSS to change the color in different scenarios?
Also, I would like the icon to fit nicely within a 61px, 61px container (that's responsive and shrinks down on smaller screen sizes), and I've read you can change the width and height to 100%, but is it possible to do that when saving the SVG? When we sent the linked file below, it appeared very small for some reason, like 1px by 1px.
And does it matter what size the canvas is when saving the SVG when it will be resized to fit the container?
SVG file
Is there something I can do to prep the SVG to make this easier for the developers, or should the SVG file above (open and then right-click and inspect the code) be enough for them to implement it?
More posts by @Gloria351
1 Comments
Sorted by latest first Latest Oldest Best
Changing an svg fill colour with CSS is possible, depending a bit on your .svg format.
svg path { fill: #ffffff ; }
has been successful for me in the past to change an .svg's fill colour. I threw in an !important to ensure things worked.
.svg files have the annoying quality of being displayed in 1x1 px size, unless you specify a size with CSS. Setting a min-width is a good idea here.
To prep an .svg, you'd want to make it as bare-bones as possible. I suggest using an .svg optimiser, you can find a few here.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.