Why do my svg look so bad? - google-chrome

Question

My svg looks very bad in Google Chrome and Firefox too, the Svg borders have poor quality:
Meanwhile, in Illustrator the svg looks awesome:
I have saved the .svg file with this configuration:
What is happened?

Answer 1

If your SVG has a lot of horizontal and/or vertical lines, you can improve its appearance by aligning the coordinates to the pixel grid. I'll give you an example:
Here are three SVG images made of rounded rectangles. (The source code for these images is pasted below.)
In (A), the rectangle coordinates aren't aligned to the pixel grid at all. As a result, some of the lines are clear and sharp while others are fuzzy and a bit darker.
In (B), the rectangle coordinates are snapped to integer values, giving them a uniform appearance. However, they all look fuzzy now, because the antialiasing spreads each line across a width of two pixels.
In (C), the coordinates are snapped to integer values and given an additional offset of 0.5 pixels in the x and y directions. You should be able to see a definite improvement here.
If you're working in Illustrator, try viewing your artwork at 100% in "Pixel Preview" mode.
I would also recommend not using stroke widths smaller than 1 pixel. If you want to simulate thinner lines, try reducing the opacity instead.
<svg width="200" height="150" viewBox="0 0 200 150">
<!-- (Original drawing) -->
<rect x="0" y="0" width="200" height="150" fill="#47f" stroke="none" />
<g fill="none" stroke="#fff" stroke-width="1.2">
<rect x="20.1" y="20.1" width="160" height="110" rx="50" ry="50"/>
<rect x="25.3071" y="25.3071" width="149.5857" height="99.5857" rx="44.7929" ry="44.7929"/>
<rect x="30.5143" y="30.5143" width="139.1714" height="89.1714" rx="39.5857" ry="39.5857"/>
<rect x="35.7215" y="35.7215" width="128.7571" height="78.7571" rx="34.3785" ry="34.3785"/>
<rect x="40.9286" y="40.9286" width="118.3428" height="68.3428" rx="29.1714" ry="29.1714"/>
</g>
<text x="100" y="80" text-anchor="middle" font-family="sans-serif" font-size="20" fill="#fff">(A)</text>
</svg>
<svg width="200" height="150" viewBox="0 0 200 150">
<!-- (Lines snapped to integer coordinates) -->
<rect x="0" y="0" width="200" height="150" fill="#47f" stroke="none" />
<g fill="none" stroke="#fff" stroke-width="1.2">
<rect x="20" y="20" width="160" height="110" rx="50" ry="50"/>
<rect x="25" y="25" width="150" height="100" rx="45" ry="45"/>
<rect x="30" y="30" width="140" height="90" rx="40" ry="40"/>
<rect x="35" y="35" width="130" height="80" rx="35" ry="35"/>
<rect x="40" y="40" width="120" height="70" rx="30" ry="30"/>
</g>
<text x="100" y="80" text-anchor="middle" font-family="sans-serif" font-size="20" fill="#fff">(B)</text>
</svg>
<svg width="200" height="150" viewBox="0 0 200 150">
<text x="100" y="80" text-anchor="middle" font-family="sans-serif" font-size="20" fill="#fff">(A)</text>
<!-- (Lines snapped to integer coordinates with 0.5px offset) -->
<rect x="0" y="0" width="200" height="150" fill="#47f" stroke="none" />
<g fill="none" stroke="#fff" stroke-width="1.2">
<rect x="20.5" y="20.5" width="160" height="110" rx="50" ry="50"/>
<rect x="25.5" y="25.5" width="150" height="100" rx="45" ry="45"/>
<rect x="30.5" y="30.5" width="140" height="90" rx="40" ry="40"/>
<rect x="35.5" y="35.5" width="130" height="80" rx="35" ry="35"/>
<rect x="40.5" y="40.5" width="120" height="70" rx="30" ry="30"/>
</g>
<text x="100" y="80" text-anchor="middle" font-family="sans-serif" font-size="20" fill="#fff">(C)</text>
</svg>

Answer 2

In your "bad" example, the SVG has been reduced to roughly half size. That means some of the lines that are approx 1 pixel thick in your "good" example are now only around 0.5 pixels thick. That doesn't give the anti-aliasing routines in the SVG renderer much to play with. Try making the stroke widths thicker.
You should get better results then.