How to fix SVG draw bug

Question

I want to draw a pack of icons by SVG and then animate them by javascript.

But I face a problem: on SVG icons there are some piece that not filling/stroke by color, but if I zoom in it bug is dissapearing. Here is link what I mean http://jsfiddle.net/cbjZJ/ and some screenshots

screenshot#1
screenshot#2

Code:

<style>
body {
background: #62c5c0;
}
</style>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="92px" height="64px" viewBox="0 0 92 64" enable-background="new 0 0 92 64" xml:space="preserve">



        <path fill="none" stroke="#ffffff" d="M17.094,19.783c-0.018,8.041-0.428,16.09,0.294,24.114c0.316,3.513,0.443,9.851,4.12,11.819
            c1.509,0.808,3.529,0.744,5.181,0.844c3.586,0.218,7.238-0.233,10.815-0.471c7.829-0.522,15.72-0.373,23.563-0.437
            c3.886-0.032,7.772-0.101,11.656-0.244c2.915-0.107,5.97-0.066,8.829-0.721c3.5-0.802,3.485-4.973,3.485-7.871
            c0-7.488,0.273-14.992,0.163-22.476c-0.044-3.003-0.341-5.994-1.035-8.919c-0.339-1.43-0.691-2.934-2.006-3.756
            c-1.302-0.814-3.545-0.426-4.967-0.407c-4.241,0.056-8.475,0.199-12.714,0.312c-8.543,0.227-17.082-0.217-25.622,0.268
            c-3.116,0.177-6.201,0.623-9.324,0.658c-2.472,0.028-4.945-0.036-7.397,0.337c-4.082,0.621-6.121,3.21-5.757,7.309
            c0.029,0.321,0.526,0.276,0.498-0.045c-0.566-6.372,4.989-7.015,9.99-7.088c6.243-0.092,12.431-0.8,18.677-0.918
            c7.864-0.148,15.719,0.102,23.582-0.169c3.291-0.113,6.581-0.146,9.873-0.193c1-0.014,2.026-0.035,2.953,0.39
            c1.315,0.603,1.615,2.87,1.869,4.076c1.46,6.931,0.717,14.052,0.717,21.076c0,3.894,0.206,7.859-0.089,11.744
            c-0.177,2.336-0.564,4.479-3.068,5.201c-3.016,0.87-6.583,0.616-9.682,0.729c-4.2,0.154-8.404,0.192-12.606,0.223
            c-7.808,0.058-15.635,0.003-23.429,0.544c-4.031,0.28-8.097,0.635-12.118,0.067c-3.143-0.443-4.034-2.867-4.731-5.638
            c-2.451-9.738-1.244-20.475-1.222-30.404C17.592,19.416,17.094,19.464,17.094,19.783L17.094,19.783z"/>




        <path fill="none" stroke="#ffffff" d="M17.004,19.651c22.247-0.016,44.479-1.06,66.726-1.076c0.322,0,0.28-0.499-0.041-0.498
            c-22.247,0.016-44.479,1.06-66.726,1.076C16.641,19.153,16.683,19.652,17.004,19.651L17.004,19.651z"/>




        <path fill="none" stroke="#ffffff" d="M27.138,12.574c-0.35,2.288-0.345,4.593,0.005,6.881c0.049,0.319,0.538,0.213,0.489-0.105
            c-0.344-2.247-0.338-4.506,0.005-6.752C27.686,12.28,27.186,12.258,27.138,12.574L27.138,12.574z"/>




        <path fill="none" stroke="#ffffff" d="M40.77,12.604c0,2.033,0,4.066,0,6.099c0,0.323,0.499,0.285,0.499-0.035c0-2.033,0-4.066,0-6.099
            C41.269,12.245,40.77,12.284,40.77,12.604L40.77,12.604z"/>




        <path fill="none" stroke="#ffffff" d="M46.999,30.595c1.162-5.698-4.501-5.907-8.724-5.661c-2.727,0.159-5.524,0.151-8.236,0.423
            c-1.706,0.171-3.695,0.547-4.409,2.338c-0.978,2.45-0.585,5.33-0.685,7.905c-0.125,3.205-0.46,6.565,0.716,9.624
            c0.877,2.28,2.925,2.624,5.102,2.687c3.311,0.097,6.586-0.578,9.889-0.635c0.322-0.006,0.339-0.505,0.017-0.5
            c-2.098,0.036-4.193,0.328-6.284,0.494c-2.305,0.183-5.752,0.753-7.538-1.055c-2.033-2.058-1.58-6.247-1.48-8.867
            c0.093-2.429,0.039-4.88,0.241-7.302c0.445-5.345,6.198-4.135,10.147-4.428c3.938-0.291,12.062-1.524,10.765,4.834
            C46.456,30.765,46.934,30.911,46.999,30.595L46.999,30.595z"/>




        <path fill="none" stroke="#ffffff" d="M39.69,31.468c9.28-3.344,19.43-1.021,29.021-1.445c4.697-0.208,11.439-1.547,12.529,4.698
            c0.685,3.924,0.761,9.198-0.646,12.99c-1.467,3.954-8.297,2.625-11.488,2.686c-5.102,0.098-10.242,0.155-15.332,0.516
            c-3.665,0.26-12.313,1.725-13.258-3.506c-0.393-2.177,0.019-4.776,0.062-6.976c0.056-2.868,0.154-5.683-0.388-8.514
            c-0.061-0.317-0.554-0.235-0.493,0.082c0.73,3.815,0.439,7.809,0.331,11.674c-0.048,1.708-0.293,3.469,0.357,5.096
            c1.514,3.785,8.26,2.975,11.323,2.788c6.694-0.409,13.432-0.667,20.14-0.695c3.058-0.013,7.261,0.636,9.007-2.528
            c1.897-3.437,1.34-8.845,1.015-12.594c-0.397-4.578-3.189-6.408-7.595-6.471c-2.776-0.04-5.544,0.311-8.323,0.276
            c-3.176-0.04-6.351-0.223-9.526-0.307c-5.641-0.148-11.572-0.161-16.945,1.775C39.176,31.123,39.389,31.576,39.69,31.468
            L39.69,31.468z"/>




        <path fill="none" stroke="#ffffff" d="M30.292,33.641c0.734-0.027,1.418-0.332,2.152-0.359c0.323-0.012,0.249-0.507-0.07-0.495
            c-0.734,0.027-1.418,0.332-2.152,0.359C29.9,33.157,29.973,33.652,30.292,33.641L30.292,33.641z"/>




        <path fill="none" stroke="#ffffff" d="M32.792,37.229c0.717,0,1.435,0,2.152,0c0.322,0,0.272-0.498-0.048-0.498c-0.717,0-1.435,0-2.152,0
            C32.422,36.732,32.472,37.229,32.792,37.229L32.792,37.229z"/>




        <path fill="none" stroke="#ffffff" d="M53.906,39.381c3.229,0,6.457,0,9.686,0c0.319,0,0.379-0.497,0.057-0.497c-3.229,0-6.457,0-9.686,0
            C53.644,38.885,53.584,39.381,53.906,39.381L53.906,39.381z"/>




        <path fill="none" stroke="#ffffff" d="M69.349,39.024c0.12,0,0.239,0,0.359,0c0.322,0,0.345-0.5,0.023-0.5c-0.12,0-0.239,0-0.359,0
            C69.049,38.525,69.026,39.024,69.349,39.024L69.349,39.024z"/>




        <path fill="none" stroke="#ffffff" d="M58.617,45.122c3.846,0.025,7.664,0.263,11.48-0.359c0.315-0.051,0.281-0.551-0.038-0.499
            c-3.816,0.622-7.634,0.383-11.48,0.359C58.257,44.622,58.296,45.12,58.617,45.122L58.617,45.122z"/>




        <path fill="none" stroke="#ffffff" d="M82.275,7.455c3.365,0.091,4.38,2.91,4.414,5.848c0.004,0.323,0.504,0.322,0.5,0
            c-0.037-3.244-1.271-6.25-4.914-6.349C81.952,6.946,81.953,7.446,82.275,7.455L82.275,7.455z"/>




        <path fill="none" stroke="#ffffff" d="M85.879,4.943c2.184,0.037,3.965,1.295,3.684,3.649c-0.038,0.318,0.453,0.416,0.491,0.095
            c0.321-2.689-1.68-4.2-4.208-4.243C85.523,4.439,85.559,4.938,85.879,4.943L85.879,4.943z"/>




        <path fill="none" stroke="#ffffff" d="M16.019,54.163c-0.262,3.586,2.498,5.952,5.95,6.024c0.319,0.007,0.395-0.488,0.073-0.495
            c-3.15-0.066-5.773-2.119-5.529-5.456C16.537,53.917,16.042,53.842,16.019,54.163L16.019,54.163z"/>




        <path fill="none" stroke="#ffffff" d="M13.87,59.279c0.889,3.068,3.907,3.728,6.757,3.416c0.321-0.035,0.204-0.522-0.112-0.487
            c-2.55,0.278-5.352-0.262-6.158-3.041C14.268,58.858,13.78,58.969,13.87,59.279L13.87,59.279z"/>




        <path fill="none" stroke="#ffffff" d="M1.88,18.573c2.261,0.347,4.555,0.37,6.816,0.717c0.319,0.049,0.393-0.446,0.074-0.495
            c-2.261-0.347-4.555-0.37-6.816-0.717C1.635,18.03,1.561,18.524,1.88,18.573L1.88,18.573z"/>




        <path fill="none" stroke="#ffffff" d="M5.347,8.835c0.922,0.625,1.726,1.367,2.511,2.152c0.228,0.228,0.539-0.164,0.313-0.39
            C7.387,9.812,6.582,9.07,5.661,8.445C5.395,8.265,5.081,8.654,5.347,8.835L5.347,8.835z"/>




        <path fill="none" stroke="#ffffff" d="M13.204,1.266c1.324,1.381,2.065,3.05,2.458,4.907c0.067,0.315,0.559,0.229,0.492-0.087
            c-0.409-1.935-1.184-3.699-2.565-5.138C13.367,0.715,12.981,1.033,13.204,1.266L13.204,1.266z"/>

Is it possible to solve this problem in some way? http://jsfiddle.net/cbjZJ/

Answer 1

The paths are all still there, but they are less than 1 pixel wide, so they get blurred with the surrounding colour.

If you really want all the pieces to always show crisply (no blurring), there is a CSS property for SVGs called "shape-rendering" which you can use to turn off anti-aliasing:

svg {
    shape-rendering:crispEdges;
}

http://jsfiddle.net/cbjZJ/

The downside, of course, is that now your drawing looks much more pixelated.

Your only other option is to make all the lines in your shape thicker, as @Francis Hemsher suggested.

svg path {
    stroke-width: 2px;
}

http://jsfiddle.net/cbjZJ/1/

Answer 2

Try adding a stroke-width attribute value to the paths.