Svg Not Sharp, But Blurry

svg not sharp, but blurry

If you want your SVG to be at its sharpest, then design it so that its shapes - especially the horizontal and vertical parts of the shapes - are on pixel boundaries.

For example, compare the following two examples:

<svg width="50" height="50">

  <rect x="9.5" y="9.5" width="31" height="31"/>

</svg>

<svg width="50" height="50">

  <rect x="10" y="10" width="30" height="30"/>

</svg>

Why is this SVG so blurry?

If you want that text to look crisp, at such a small size in SVG, the best solution is to tweak the glyph shapes so that the fit within the pixel boundaries better.

The following illustration shows what I mean. In my editor I turned on a 148x45 grid to match the output size. Then I tweaked the character shapes so that they lay within the pixel boundaries better. The black shape is the original path shape, and the grey is the tweaked version. I looked for parts of the glyphs that were spanning the pixel boundary, and adjusted them so that were no longer doing that. You want to especially focus on the vertical and horizontal stems of the glyphs.

In the image below, the right hand side of the "D" is running down a grid line. I shifted that part right a little so it was wholly in the next column of pixels. I could have moved that part left, but I didn't want the character to look too narrow. In the case of the "N" I just shifted it a fraction leftwards.

In the updated example below, the second SVG is my modified version where I have tweaked the first "D", "N" and "F" to show the improvement. I'll leave the rest of the tweaking to you.

body {background:#000}

<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="#fff" aria-label="Test" viewBox="0 0 348.081 96.151" width="148" height="45" version="1.1"><title>Test</title><desc>Test</desc><path class="a" d="M 6.42 95.06 a 3.72 3.72 0 0 1 -2.74 1 H 0 v -11 h 3.68 a 3.72 3.72 0 0 1 2.74 1 c 1.11 1.11 1.06 2.85 1.06 4.33 s 0.05 3.56 -1.06 4.67 Z m -0.59 -8.38 a 3.09 3.09 0 0 0 -2.35 -0.85 H 0.83 v 9.48 h 2.65 a 3.09 3.09 0 0 0 2.35 -0.85 c 0.86 -0.91 0.82 -2.82 0.82 -4 s 0.05 -2.87 -0.82 -3.78 Z M 12.75 85.1 h 0.83 v 11 h -0.83 Z M 19.28 85.1 h 6.65 v 0.74 h -5.82 v 4.33 h 5 v 0.74 h -5 v 4.42 h 5.82 v 0.74 h -6.65 Z M 37.86 86.53 v 9.53 H 37 v -11 h 0.83 l 6.33 9.5 V 85.1 H 45 v 11 h -0.83 Z M 50.71 85.1 h 6.65 v 0.74 h -5.81 v 4.33 h 5 v 0.74 h -5 v 4.42 h 5.82 v 0.74 h -6.66 Z M 65.83 96.15 a 3.55 3.55 0 0 1 -3.76 -3.65 v -7.4 h 0.83 v 7.3 a 2.93 2.93 0 1 0 5.85 0 v -7.3 h 0.83 v 7.4 a 3.55 3.55 0 0 1 -3.75 3.65 Z M 75.13 85.1 h 6.65 v 0.74 H 76 v 4.33 h 5 v 0.74 h -5 v 4.42 h 5.82 v 0.74 h -6.69 Z M 99.3 95.06 a 3.72 3.72 0 0 1 -2.74 1 h -3.68 v -11 h 3.68 a 3.72 3.72 0 0 1 2.74 1 c 1.11 1.11 1.06 2.85 1.06 4.33 s 0.05 3.56 -1.06 4.67 Z m -0.59 -8.38 a 3.09 3.09 0 0 0 -2.36 -0.85 h -2.63 v 9.48 h 2.65 a 3.09 3.09 0 0 0 2.36 -0.85 c 0.86 -0.91 0.82 -2.82 0.82 -4 s 0.03 -2.87 -0.83 -3.78 Z M 105.63 85.1 h 6.65 v 0.74 h -5.82 v 4.33 h 5 v 0.74 h -5 v 4.42 h 5.82 v 0.74 h -6.65 Z M 118 90.35 h 5 v 0.74 h -5 v 5 h -0.83 v -11 h 6.65 v 0.74 H 118 Z M 128.33 85.1 h 0.83 v 11 h -0.83 Z M 135.68 86.53 v 9.53 h -0.83 v -11 h 0.83 L 142 94.6 v -9.5 h 0.83 v 11 H 142 Z M 148.54 85.1 h 0.83 v 11 h -0.83 Z M 157.93 96.06 h -0.83 V 85.84 h -3.26 v -0.74 h 7.37 v 0.74 h -3.28 Z M 165.68 85.1 h 0.83 v 11 h -0.83 Z M 178.27 95 a 3.9 3.9 0 0 1 -5.48 0 c -1 -1 -1 -2 -1 -4.45 s 0 -3.45 1 -4.45 a 3.9 3.9 0 0 1 5.48 0 c 1 1 1 2 1 4.45 s 0 3.45 -1 4.45 Z m -0.66 -8.44 a 3 3 0 0 0 -4.16 0 c -0.78 0.78 -0.85 1.65 -0.85 4 s 0.06 3.2 0.85 4 a 3 3 0 0 0 4.16 0 c 0.79 -0.78 0.85 -1.65 0.85 -4 s -0.07 -3.18 -0.85 -3.97 Z M 185.38 86.53 v 9.53 h -0.83 v -11 h 0.83 l 6.33 9.5 V 85.1 h 0.83 v 11 h -0.83 Z M 206.54 96.06 l -3.6 -11 h 0.88 l 3.08 9.5 l 3.1 -9.46 h 0.88 l -3.6 11 Z M 220.92 95 a 3.9 3.9 0 0 1 -5.48 0 c -1 -1 -1 -2 -1 -4.45 s 0 -3.45 1 -4.45 a 3.9 3.9 0 0 1 5.48 0 c 1 1 1 2 1 4.45 s 0 3.45 -1 4.45 Z m -0.66 -8.44 a 3 3 0 0 0 -4.16 0 c -0.78 0.78 -0.85 1.65 -0.85 4 s 0.06 3.2 0.85 4 a 3 3 0 0 0 4.16 0 c 0.79 -0.78 0.85 -1.65 0.85 -4 s -0.11 -3.18 -0.86 -3.97 Z M 228 86.53 v 9.53 h -0.83 v -11 h 0.83 l 6.33 9.5 V 85.1 h 0.83 v 11 h -0.83 Z M 250 96.06 h -0.83 V 85.84 h -3.26 v -0.74 h 7.37 v 0.74 H 250 Z M 262.3 93.4 h -5.11 l -1 2.66 h -0.89 l 4 -11 h 0.74 l 4 11 h -0.89 Z m -4.85 -0.74 H 262 l -2.29 -6.45 Z M 269.21 86.53 v 9.53 h -0.83 v -11 h 0.83 l 6.33 9.5 V 85.1 h 0.83 v 11 h -0.83 Z M 281.35 95.18 l 5.77 -9.34 h -5.54 v -0.74 H 288 v 0.74 l -5.82 9.48 H 288 v 0.74 h -6.67 Z M 288 45.14 c 0.22 -20.77 -19 -27.76 -32.41 -18.37 v -4.29 h -11.23 v 50.44 h 11.24 V 44.68 c 0.47 -13.65 21.16 -13.5 21.16 0.47 v 27.77 H 288 V 45.14 Z M 92.53 22.5 v 4.9 a 25.83 25.83 0 1 0 0 41.73 v 3.78 h 11.24 V 22.5 Z M 77.3 62.88 a 14.64 14.64 0 1 1 13.57 -9.21 a 14.61 14.61 0 0 1 -13.57 9.21 Z M 167.08 32.18 h 13 v -9.75 h -13 V 10.74 h -11.24 v 11.7 h -7.29 v 9.74 h 7.23 v 19 c 0 0.79 0 1.55 0.06 2.29 a 24.13 24.13 0 0 0 1.46 7.61 a 16.47 16.47 0 0 0 5 6.65 a 23.06 23.06 0 0 0 12.28 5 a 30 30 0 0 0 3.31 0.2 h 1.29 V 62.24 H 177.88 a 11.73 11.73 0 0 1 -6.88 -1.89 a 8.33 8.33 0 0 1 -3.46 -5.28 a 15.14 15.14 0 0 1 -0.44 -3 V 32.18 Z M 223 22.51 v 29.1 a 19.25 19.25 0 0 1 -0.51 5 a 8.33 8.33 0 0 1 -3.49 5.26 a 11.71 11.71 0 0 1 -6.87 1.93 h -0.05 q -5.29 0 -8.14 -3 a 7.89 7.89 0 0 1 -2.14 -3.45 a 23.1 23.1 0 0 1 -0.51 -5.69 v -29 l -11.24 -0.09 v 30.15 a 34 34 0 0 0 0.91 8.22 a 18 18 0 0 0 7.75 9.74 a 24.23 24.23 0 0 0 13.42 3.75 a 24 24 0 0 0 15.6 -5.17 a 16.47 16.47 0 0 0 5 -6.65 a 27.07 27.07 0 0 0 1.52 -9.89 V 22.51 Z M 348.07 63.87 V 22.51 h -11.24 v 4.89 a 25.84 25.84 0 1 0 0 41.73 c 0 4.4 -0.66 8.15 -3.81 11.45 a 14.26 14.26 0 0 1 -23.94 -5.69 l -10.55 3.66 A 25.42 25.42 0 0 0 345.46 82 c 2.93 -5.81 2.61 -11.84 2.61 -18.13 Z m -12.95 -10.21 a 14.45 14.45 0 1 1 1 -5.39 a 14.55 14.55 0 0 1 -1 5.39 Z M 126.49 43.13 v -0.25 c 0.06 -0.32 0.13 -0.63 0.21 -0.95 v -0.16 a 13.06 13.06 0 0 1 12.6 -9.66 c 0.42 0 0.83 0 1.23 0.06 v -9.68 h -0.33 c -5.18 0 -10.59 0.29 -14.07 4.7 v -4.75 H 115 v 50.48 h 11.2 V 47.39 a 30.78 30.78 0 0 1 0.17 -3.39 c 0.03 -0.3 0.07 -0.58 0.12 -0.87 Z M 43.72 45.14 c 0.22 -20.77 -19 -27.76 -32.41 -18.37 V 0 H 0.07 v 72.92 h 11.24 V 44.68 c 0.47 -13.65 21.16 -13.5 21.16 0.47 v 27.77 h 11.25 V 45.14 Z" /></svg>

<br>

<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="#fff" aria-label="Test" viewBox="0 0 348.081 96.151" width="148" height="45" version="1.1"><title>Test</title><desc>Test</desc><path class="a" d="m 7.490133,95.024329 c -0.7391233,0.692428 -1.7286192,1.053558 -2.74,1 L 0,96.06 v -11 l 4.750133,-0.03567 c 1.0113808,-0.05356 2.0008767,0.307572 2.74,1 1.11,1.11 1.06,2.85 1.06,4.33 0,1.48 0.05,3.56 -1.06,4.67 z m -0.59,-8.38 c -0.6287095,-0.60158 -1.4819268,-0.91019 -2.35,-0.85 L 0.83,85.83 v 9.48 l 3.720133,-0.03567 c 0.8680732,0.06019 1.7212905,-0.24842 2.35,-0.85 0.86,-0.91 0.82,-2.82 0.82,-4 0,-1.18 0.05,-2.87 -0.82,-3.78 z M 12.75,85.1 h 0.83 v 11 h -0.83 z m 6.53,0 h 6.65 v 0.74 h -5.82 v 4.33 h 5 v 0.74 h -5 v 4.42 h 5.82 v 0.74 h -6.65 z m 18.080605,1.251644 v 9.53 h -0.86 v -11 h 0.83 l 6.33,9.5 v -9.46 h 0.84 v 11 h -0.83 z M 50.71,85.1 h 6.65 v 0.74 h -5.81 v 4.33 h 5 v 0.74 h -5 v 4.42 h 5.82 v 0.74 h -6.66 z m 15.12,11.05 c -2.082291,0.124333 -3.822469,-1.564936 -3.76,-3.65 v -7.4 h 0.83 v 7.3 c -0.241867,4.134797 6.091867,4.134797 5.85,0 v -7.3 h 0.83 v 7.4 c 0.062,2.08085 -1.671585,3.768206 -3.75,3.65 z m 9.3,-11.05 h 6.65 v 0.74 H 76 v 4.33 h 5 v 0.74 h -5 v 4.42 h 5.82 v 0.74 h -6.69 z m 24.17,9.96 c -0.739123,0.692428 -1.728619,1.053558 -2.74,1 h -3.68 v -11 h 3.68 c 1.011381,-0.05356 2.000877,0.307572 2.74,1 1.11,1.11 1.06,2.85 1.06,4.33 0,1.48 0.05,3.56 -1.06,4.67 z m -0.59,-8.38 c -0.631112,-0.604252 -1.488539,-0.913071 -2.36,-0.85 h -2.63 v 9.48 h 2.65 c 0.871461,0.06307 1.728888,-0.245748 2.36,-0.85 0.86,-0.91 0.82,-2.82 0.82,-4 0,-1.18 0.03,-2.87 -0.83,-3.78 z m 6.92,-1.58 h 6.65 v 0.74 h -5.82 v 4.33 h 5 v 0.74 h -5 v 4.42 h 5.82 v 0.74 h -6.65 z m 11.8706,5.449422 h 5 v 0.74 h -5 v 5 h -0.83 v -11 h 6.65 v 0.74 h -5.82 z M 128.33,85.1 h 0.83 v 11 h -0.83 z m 7.35,1.43 v 9.53 h -0.83 v -11 h 0.83 L 142,94.6 v -9.5 h 0.83 v 11 H 142 Z m 12.86,-1.43 h 0.83 v 11 h -0.83 z m 9.39,10.96 H 157.1 V 85.84 h -3.26 V 85.1 h 7.37 v 0.74 h -3.28 z m 7.75,-10.96 h 0.83 v 11 h -0.83 z m 12.59,9.9 c -1.5189,1.499574 -3.9611,1.499574 -5.48,0 -1,-1 -1,-2 -1,-4.45 0,-2.45 0,-3.45 1,-4.45 1.5189,-1.499574 3.9611,-1.499574 5.48,0 1,1 1,2 1,4.45 0,2.45 0,3.45 -1,4.45 z m -0.66,-8.44 c -1.16151,-1.117532 -2.99849,-1.117532 -4.16,0 -0.78,0.78 -0.85,1.65 -0.85,4 0,2.35 0.06,3.2 0.85,4 1.16151,1.117532 2.99849,1.117532 4.16,0 0.79,-0.78 0.85,-1.65 0.85,-4 0,-2.35 -0.07,-3.18 -0.85,-3.97 z m 7.77,-0.03 v 9.53 h -0.83 v -11 h 0.83 l 6.33,9.5 V 85.1 h 0.83 v 11 h -0.83 z m 21.16,9.53 -3.6,-11 h 0.88 l 3.08,9.5 3.1,-9.46 h 0.88 l -3.6,11 z M 220.92,95 c -1.5189,1.499574 -3.9611,1.499574 -5.48,0 -1,-1 -1,-2 -1,-4.45 0,-2.45 0,-3.45 1,-4.45 1.5189,-1.499574 3.9611,-1.499574 5.48,0 1,1 1,2 1,4.45 0,2.45 0,3.45 -1,4.45 z m -0.66,-8.44 c -1.16151,-1.117532 -2.99849,-1.117532 -4.16,0 -0.78,0.78 -0.85,1.65 -0.85,4 0,2.35 0.06,3.2 0.85,4 1.16151,1.117532 2.99849,1.117532 4.16,0 0.79,-0.78 0.85,-1.65 0.85,-4 0,-2.35 -0.11,-3.18 -0.86,-3.97 z M 228,86.53 v 9.53 h -0.83 v -11 H 228 l 6.33,9.5 V 85.1 h 0.83 v 11 h -0.83 z m 22,9.53 h -0.83 V 85.84 h -3.26 V 85.1 h 7.37 v 0.74 H 250 Z m 12.3,-2.66 h -5.11 l -1,2.66 h -0.89 l 4,-11 h 0.74 l 4,11 h -0.89 z m -4.85,-0.74 H 262 l -2.29,-6.45 z m 11.76,-6.13 v 9.53 h -0.83 v -11 h 0.83 l 6.33,9.5 V 85.1 h 0.83 v 11 h -0.83 z m 12.14,8.65 5.77,-9.34 h -5.54 V 85.1 H 288 v 0.74 l -5.82,9.48 H 288 v 0.74 h -6.67 z M 288,45.14 C 288.22,24.37 269,17.38 255.59,26.77 V 22.48 H 244.36 V 72.92 H 255.6 V 44.68 c 0.47,-13.65 21.16,-13.5 21.16,0.47 V 72.92 H 288 Z M 92.53,22.5 v 4.9 C 75.461286,14.944039 51.474279,27.135676 51.474279,48.265 c 0,21.129324 23.987007,33.320961 41.055721,20.865 v 3.78 h 11.24 V 22.5 Z M 77.3,62.88 C 62.861589,62.905415 57.111416,44.233361 69.053789,36.128036 80.996162,28.022711 96.225216,40.26142 90.87,53.67 88.65887,59.228708 83.282335,62.877779 77.3,62.88 Z m 89.78,-30.7 h 13 v -9.75 h -13 V 10.74 h -11.24 v 11.7 h -7.29 v 9.74 h 7.23 v 19 c 0,0.79 0,1.55 0.06,2.29 0.0735,2.598754 0.56656,5.168548 1.46,7.61 1.07009,2.608043 2.79169,4.897767 5,6.65 3.51559,2.832883 7.78545,4.571426 12.28,5 1.0988,0.127641 2.20382,0.194409 3.31,0.2 h 1.29 V 62.24 h -1.3 c -2.43395,0.09967 -4.83855,-0.560893 -6.88,-1.89 -1.80138,-1.237902 -3.04405,-3.134224 -3.46,-5.28 -0.24668,-0.982757 -0.39409,-1.987796 -0.44,-3 V 32.18 Z M 223,22.51 v 29.1 c 0.0492,1.681793 -0.12222,3.362783 -0.51,5 -0.42822,2.143294 -1.68165,4.032424 -3.49,5.26 -2.03344,1.34241 -4.43498,2.017078 -6.87,1.93 h -0.05 c -3.52667,0 -6.24,-1 -8.14,-3 -1.00205,-0.943648 -1.73981,-2.133022 -2.14,-3.45 -0.40478,-1.868258 -0.57609,-3.779537 -0.51,-5.69 v -29 l -11.24,-0.09 v 30.15 c -0.0323,2.766821 0.27331,5.527237 0.91,8.22 1.34288,4.064977 4.0906,7.518251 7.75,9.74 4.00966,2.537035 8.67598,3.840962 13.42,3.75 5.64639,0.166239 11.17047,-1.664497 15.6,-5.17 2.20831,-1.752233 3.92991,-4.041957 5,-6.65 1.11685,-3.173568 1.63232,-6.527521 1.52,-9.89 V 22.51 Z M 348.07,63.87 V 22.51 h -11.24 v 4.89 c -17.07379,-12.473542 -41.08268,-0.278788 -41.08268,20.865 0,21.143788 24.00889,33.338542 41.08268,20.865 0,4.4 -0.66,8.15 -3.81,11.45 -7.53312,7.872492 -20.75461,4.730041 -23.94,-5.69 l -10.55,3.66 c 3.19664,9.815442 12.01172,16.723049 22.3068,17.479879 C 331.13188,96.786709 340.86234,91.242454 345.46,82 c 2.93,-5.81 2.61,-11.84 2.61,-18.13 z M 335.12,53.66 c -2.72277,6.931623 -10.26807,10.658643 -17.42545,8.608835 -7.15718,-2.04975 -11.58044,-9.204291 -10.22205,-16.526006 1.35839,-7.321716 8.05368,-12.413444 15.46981,-11.759426 7.41634,0.654036 13.12257,6.839596 13.17769,14.286597 0.0112,1.843799 -0.32816,3.672925 -1,5.39 z M 126.49,43.13 v -0.25 c 0.06,-0.32 0.13,-0.63 0.21,-0.95 v -0.16 c 1.53594,-5.696373 6.70019,-9.655634 12.6,-9.66 0.42,0 0.83,0 1.23,0.06 v -9.68 h -0.33 c -5.18,0 -10.59,0.29 -14.07,4.7 V 22.44 H 115 v 50.48 h 11.2 V 47.39 c -0.006,-1.132267 0.051,-2.263987 0.17,-3.39 0.03,-0.3 0.07,-0.58 0.12,-0.87 z M 43.72,45.14 C 43.94,24.37 24.72,17.38 11.31,26.77 V 0 H 0.07 V 72.92 H 11.31 V 44.68 c 0.47,-13.65 21.16,-13.5 21.16,0.47 v 27.77 h 11.25 z" /></svg>

Why is my resized SVG icon blurry when rendered?

The reason it is "blurry" is due to anti-aliasing. When the edge of a line or shape only partly covers a pixel, the browser approximates that partial coverage by drawing a semi-translucent pixel.

For example, if your background is white and the edge of a black shape only covers half a pixel. That will be approximated by setting that pixel to 50% grey.

Your icon is being drawn at 22x22 pixels. If I blow up your icon design 20x and overlay a 22x22 pixel grid. You should be able to see what is happening.

div {

  position: relative;

}

div > * {

  position: absolute;

  top: 0;

}

svg {

  height: 440px;

  width: 440px;

}

svg:not(.grid) {

  opacity: 0.5;

}

<div>

  <svg class="grid" viewBox="0 0 22 22" fill="none" stroke="red" stroke-width="0.045">

    <path d="M0,0 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22"/>

    <path d="M0,0 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22"/>

  </svg>

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15.6 11.9H6v-1.2c0-.4-.3-.7-.7-.7H3.8c-.4 0-.7.3-.7.7v1.2H.4c-.1 0-.2.1-.2.2v.5c0 .1.1.2.2.2h2.7V14c0 .4.3.7.7.7h1.5c.4 0 .7-.3.7-.7v-1.2h9.5c.1 0 .2-.1.2-.2v-.5c.1-.1 0-.2-.1-.2zm-10.5 2h-1V11h1v2.9zM15.6 3.1H8V1.9c0-.4-.3-.7-.7-.7H5.8c-.4 0-.7.3-.7.7v1.2H.4c-.1 0-.2.1-.2.2v.5c0 .1.1.2.2.2h4.7v1.2c0 .5.3.8.7.8h1.5c.4 0 .7-.3.7-.7V4.1h7.6c.1 0 .2-.1.2-.2v-.6c0-.1-.1-.2-.2-.2zM7 5.1H6v-3h1v3zm8.6 2.4h-2.7V6.3c0-.4-.3-.7-.7-.7h-1.5c-.4 0-.7.3-.7.7v1.2H.4c-.1 0-.2.1-.2.2v.5c0 .1.1.2.2.2H10v1.2c0 .4.3.7.7.7h1.5c.4 0 .7-.3.7-.7V8.5h2.7c.1 0 .2-.1.2-.2v-.5c0-.2-.1-.3-.2-.3zm-3.7 2h-1v-3h1v3z"/></svg>

</div>

Blurry SVG images

You have to use vectors, not pixel/raster/bitmap images. Your logo image is a SVG, but it contains a an embedded (base64 encoded) pixel image:

<image x="0" y="0" width="212" height="69" xlink:href="data:image/png;base64,xyz">

That's why it gets blurred when scaling. Make sure that you export your images as true vector graphics.

Google for the differences between vectors and pixels for a thorough explanation. Vectors describe images by geometric patterns in a coordinate systems - so that scaling the image doesn't have any influence on quality.

SVG is sharp and clear but font is blurry even with font smoothing set to none

Problem solved. The original SVG was not aligned to pixel grid, causing blurriness. After aligning the pixels to the grid and recreating the font the problem was solved and font ended up sharp. Hurrah!

Save images to PDF - images within SVG elements are blurry, whereas images in img are sharp

Wrapping a raster graphic image inside a svg name does not make it a true scalable vector graphic. The method used is a "gradient fill with image" thus not as efficient as using true SVG objects with true colour gradient fills.

To get png in svg wrapping keep it simple

<div>
<svg width="2000" height="2000" >
 <rect x="0" y="0" height="1000" width="1000" style="fill: #f0fff0"/>
 <image x="30" y="00" width="160" height="160" xlink:href="103735.png" />
 <image x="300" y="50" width="160" height="160" xlink:href="103735.png" />
</svg>
</div>

Small unscaled SVG rendering blurry and wrong in all browsers

The results when I try your SVG are not as bad as your screenshot. So I'm not sure why that is. Sketch looks like it may be bumping the geometry to line up with pixel boundaries - not unlike font renderers.

You can significantly improve the look of your icon by thinking about how the outlines of your shape are with respect to pixel boundaries.

If you blow up your icon a bit, and draw grid lines corresponding to a 24x24 pixel rendering, you will see what I mean:

var grid = document.getElementById("grid");

for (var i=1; i<24; i++) {

  var line = document.createElementNS("http://www.w3.org/2000/svg", "line");

  line.setAttribute("x1", 0);

  line.setAttribute("y1", i);

  line.setAttribute("x2", 24);

  line.setAttribute("y2", i);

  grid.appendChild(line);

  line = document.createElementNS("http://www.w3.org/2000/svg", "line");

  line.setAttribute("x1", i);

  line.setAttribute("y1", 0);

  line.setAttribute("x2", i);

  line.setAttribute("y2", 24);

  grid.appendChild(line);

}

<svg id="mysvg" width="240px" height="240px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

    <g id="Production" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">

        <g id="Desktop-Web-Feed" sketch:type="MSArtboardGroup" transform="translate(-110.000000, -504.000000)">

            <g id="Share" sketch:type="MSLayerGroup" transform="translate(26.000000, 504.000000)">

                <g id="Facebook" transform="translate(84.000000, 0.000000)" sketch:type="MSShapeGroup">

                    <g id="icon-web-feed-fb">

                        <rect id="Bounds" opacity="0.30626166" x="0" y="0" width="24" height="24"></rect>

                        <path d="M10,19 L10,12.9000244 L8,12.9000244 L8,10.9108276 L10,10.9108276 L10.0697378,8.28793345 C10.0697378,6.15850696 11.3218994,5 13.1515237,5 C14.02764,5 14.7807229,5.06596481 15,5.09688581 L15,7.32319812 L13.7299787,7.32319812 C12.7377746,7.32319812 12,7.70703125 12,8.53530148 L12,10.9108276 L14.8771973,10.9108276 L14.6080794,12.9000244 L12,12.9000244 L12,19 L9.1929245,19" id="Shape" stroke="#A1A1A1"></path>

                    </g>

                </g>

            </g>

        </g>

    </g>

    <g id="grid" fill="none" stroke="#ccd" stroke-width="0.1">

    </g>

</svg>

---

Related Topics