1

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?

Improve this question
1
  • Hi Mike, welcome to GDSE and thanks for your question. If you want to know more about the site, please see the help center or ping one of us in the Graphic Design Chat once your reputation is sufficient (20). Keep contributing and enjoy the site!
    – Vincent
    Aug 26, 2016 at 15:26

1 Answer 1

Reset to default
1

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.

Improve this answer
5
  • Thanks for your response Vincent. If you take a look at the linked SVG I provided, should I make the paths for the question mark (both top part and bottom part) transparent so it inherits the already-in-place CSS correctly?
    – Mike
    Aug 26, 2016 at 15:23
  • Also, within Illustrator, how do I specify the size? The canvas size is 61px by 61px.
    – Mike
    Aug 26, 2016 at 15:25
  • I don't think that's necessary. I used an .svg with an existing colour and used the css to override it. Ah, I meant specifying a size with css. I'll edit that in.
    – Vincent
    Aug 26, 2016 at 15:25
  • So the issue that's taking place is the white inside of the black stroke of the question mark is what is being filled by the CSS and not the black stroke. The other icons, the stroke is what is being changed and not having a problem.
    – Mike
    Aug 26, 2016 at 16:28
  • Ah, I see the problem. Can't you cheat by having the black stroke shape not being a shape with a hole, but a shape that overlaps itself? Sorry, on mobile atm and can't explain better.
    – Vincent
    Aug 26, 2016 at 16:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.