[SOLVED] Svg does not scale

Svg does not scale

I have an svg file and use it in my HTML code. For some reason, it does not scale. What I mean by that is that I can only change the width and height of the image ( so it just becomes a larger box taking more space, but the vector image inside that box does not scale ). In the svg file I have viewbox attribute, but when I change its values, it still does not scale (actually it does not do anything). Any ideas?

<svg
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="50px"
    height="50px"
    viewbox="0 0 64 64">
    <defs>
        <filter id="blur" width="200%" height="200%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
            <feOffset dx="0" dy="4" result="offsetblur"/>
            <feComponentTransfer>
                <feFuncA type="linear" slope="0.05"/>
            </feComponentTransfer>
        <feMerge> 
          <feMergeNode/>
          <feMergeNode in="SourceGraphic"/> 
        </feMerge>
        </filter>
        <style type="text/css"><![CDATA[ .... ( data is here )

HTML:

<img id="icon">

( I specify the img src in a separate js file )

Solution

As @Robert Longson comment mentions viewBox not viewbox. SVG is case sensitive
Methods To Resize SVG:

1st
Use the this code:

<g transform="scale(0.1)">
...
</g>

2nd
The viewbox should describe the full width and height of the SVG. The viewbox should go like this 0 0 widt height

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>

3rd
you can resize it by screening svg in image tag and give size in attribute form.

<img width="200px" src="yoursvg.svg"></img>