0

I exported the code for four inline SVGs via Sketch, with the same stroke-width and color, but one SVG behaves erratically across browsers & within browsers on Codepen.

Codepen Example

-All SVGs have a stroke-width of '2', however, the twitter svg requires a stroke-width of '4' to get the same effect (Applies to Chrome, Firefox & Safari)

-All SVGs are the same color via stroke="#999999":

  • My project viewed directly via Chrome & Firefox: the twitter svg stroke is the correct color

  • Codepen Example on Chrome & Firefox: the twitter icon is noticeably brighter, stroke appears as #c2c2c2

  • Personal Project & Codepen Example on Safari: twitter svg stroke is rendered as #c2c2c2 on both Codepen & my personal project

The 'Solution'...

By changing fill="#999999" to fill="#fff" in the twitter svg's 'rect' tag, the svg is displayed normally in Safari. Chrome & Firefox, which both rendered the correct color without this 'fix', are unaffected.

This fix works for Safari in my codepen example & when viewed from source. However, Chrome & Firefox don't render the codepen example correctly, with or without this fix applied, while both render the twitter svg correctly from source, fix or no fix.

My solution works for now, but I don't understand why it works. Any insight is much appreciated!

<rect x="29.984127" y="0.716535433" width="24.5015702" height="20.6298476" fill="#fff"></rect>
Androbaut
  • 409
  • 5
  • 19

1 Answers1

1

If you want a set of <svg> elements to look similarly when given the same stroke width, you need to make sure their viewbox-es are equal. In your example, each viewbox gets scaled in order to fit the provided width and height.

For example, in Illustrator (which is what I use) the "Artboard" matches the viewbox. So whenever I set out to create a set of icons for a web project, the first thing I do is make sure all their artboards are equally sized. In fact, I usually export all from the same artboard containing each icon in a different layer.

I'm sure you can achieve the same in Sketch. If not, find any other tool that allows you to modify the viewbox of your <svg>s so they match.

As a side note, you might want to take a look at the vast array of icon-font online editors and creators, (Glypther, Icomoon, Fontello, ...) but it's not guaranteed to solve your problem. They do automatically resize and center your icons and some allow you to adjust/fiddle with that before saving the font but, personally, I have never tried to add <svg>s with different viebox-es into the same set.
Whether or not the problem will persist depends on how the importing is done. If they unify the viewbox sizes across icons on import, scaling the icon to fit, it will fix your problem. But that doesn't mean any of the above mentioned tools do it. They should, imho.

tao
  • 82,996
  • 16
  • 114
  • 150