SVG <symbol> won't scale like the others - html

I'm having trouble with a particular icon not scaling. If you go to this plunker you'll see the very first icon (the cup with the pencil, paint brush and ruler) doesn't respond to the space like every other svg element on the page.
I designed them all in Illustrator cc18 using save to generate the svg code.
For that particular icon Illustrator gives me this code.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="illustration_x5F_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 79 146" style="enable-background:new 0 0 79 146;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
</style>
<rect id="cup" x="0.6777539" y="67.352684" class="st0" width="77.6444931" height="77.647316"/>
<path id="ruler_x5F_shape" class="st0" d="M47.0672798,19.394165v45.8275757h1.1456909v-1.1456909h4.5957031v1.1456909h12.6415443
V19.394165H47.0672798z M48.2129707,22.8312378h4.5957031v1.1456909h-4.5957031V22.8312378z M48.2129707,27.4140015h4.5957031
v1.1456909h-4.5957031V27.4140015z M48.2129707,31.9967651h4.5957031v1.1456909h-4.5957031V31.9967651z M48.2129707,36.5795288
h4.5957031v1.1456909h-4.5957031V36.5795288z M48.2129707,41.1622925h4.5957031v1.1456909h-4.5957031V41.1622925z
M48.2129707,45.7450562h4.5957031v1.1456909h-4.5957031V45.7450562z M48.2129707,50.3278198h4.5957031v1.1456909h-4.5957031
V50.3278198z M48.2129707,54.9105835h4.5957031v1.1456909h-4.5957031V54.9105835z M48.2129707,59.4932861h4.5957031v1.1456909
h-4.5957031V59.4932861z M57.404438,62.9303589h-9.1914673V61.784668h9.1914673V62.9303589z M57.404438,58.3475952h-9.1914673
v-1.1456909h9.1914673V58.3475952z M57.404438,53.7648926h-9.1914673v-1.1456909h9.1914673V53.7648926z M57.404438,49.1821289
h-9.1914673V48.036438h9.1914673V49.1821289z M57.404438,44.5993652h-9.1914673v-1.1456909h9.1914673V44.5993652z
M57.404438,40.0166016h-9.1914673v-1.1456909h9.1914673V40.0166016z M57.404438,35.4338379h-9.1914673V34.288147h9.1914673
V35.4338379z M57.404438,30.8510742h-9.1914673v-1.1456909h9.1914673V30.8510742z M57.404438,26.2683105h-9.1914673v-1.1456909
h9.1914673V26.2683105z M57.404438,21.6855469h-9.1914673V20.539856h9.1914673V21.6855469z"/>
<g id="paint_x5F_brush">
<polygon id="paint_x5F_brush_x5F_shaft" class="st0" points="41.6965485,65.2217407 42.4845047,31.4855003 39.8335533,20.8818035
34.5317612,20.8818035 31.8808079,31.4855003 32.668766,65.2217407 "/>
<path id="paint_x5F_brush_x5F_tip" class="st0" d="M40.7088737,19.7361126
c0.7722778-1.1733189,1.775631-3.1726189,1.775631-5.6534939c0-5.1422243-7.0509987-7.2129793-5.3018494-13.0826187
c-0.7470016,0.8390205-5.3017902,7.9498148-5.3017902,13.0826187c0,2.8539448,0.819376,4.633482,1.5470791,5.6534939H40.7088737z"
/>
</g>
<g id="pencil">
<rect id="pencil_x5F_shaft" x="13.5497589" y="38.286869" class="st0" width="13.7482862" height="26.9348717"/>
<polygon id="pencil_x5F_tip" class="st0" points="22.6059189,25.2016068 18.2418861,25.2016068 13.7645836,37.1411209
27.0832214,37.1411209 "/>
<polygon id="pencil_x5F_lead" class="st0" points="20.4239025,19.3829746 18.456768,24.6287041 22.391037,24.6287041 "/>
</g>
</svg>
I then copy the code and place it in a <symbol> like this
<symbol viewbox="0 0 79 146" id="illustration_icon">
<rect id="cup" x="0.6777539" y="67.352684" class="st0" width="77.6444931" height="77.647316"/>
<path id="ruler_x5F_shape" class="st0" d="M47.0672798,19.394165v45.8275757h1.1456909v-1.1456909h4.5957031v1.1456909h12.6415443
V19.394165H47.0672798z M48.2129707,22.8312378h4.5957031v1.1456909h-4.5957031V22.8312378z M48.2129707,27.4140015h4.5957031
v1.1456909h-4.5957031V27.4140015z M48.2129707,31.9967651h4.5957031v1.1456909h-4.5957031V31.9967651z M48.2129707,36.5795288
h4.5957031v1.1456909h-4.5957031V36.5795288z M48.2129707,41.1622925h4.5957031v1.1456909h-4.5957031V41.1622925z
M48.2129707,45.7450562h4.5957031v1.1456909h-4.5957031V45.7450562z M48.2129707,50.3278198h4.5957031v1.1456909h-4.5957031
V50.3278198z M48.2129707,54.9105835h4.5957031v1.1456909h-4.5957031V54.9105835z M48.2129707,59.4932861h4.5957031v1.1456909
h-4.5957031V59.4932861z M57.404438,62.9303589h-9.1914673V61.784668h9.1914673V62.9303589z M57.404438,58.3475952h-9.1914673
v-1.1456909h9.1914673V58.3475952z M57.404438,53.7648926h-9.1914673v-1.1456909h9.1914673V53.7648926z M57.404438,49.1821289
h-9.1914673V48.036438h9.1914673V49.1821289z M57.404438,44.5993652h-9.1914673v-1.1456909h9.1914673V44.5993652z
M57.404438,40.0166016h-9.1914673v-1.1456909h9.1914673V40.0166016z M57.404438,35.4338379h-9.1914673V34.288147h9.1914673
V35.4338379z M57.404438,30.8510742h-9.1914673v-1.1456909h9.1914673V30.8510742z M57.404438,26.2683105h-9.1914673v-1.1456909
h9.1914673V26.2683105z M57.404438,21.6855469h-9.1914673V20.539856h9.1914673V21.6855469z"/>
<g id="paint_x5F_brush">
<polygon id="paint_x5F_brush_x5F_shaft" class="st0" points="41.6965485,65.2217407 42.4845047,31.4855003 39.8335533,20.8818035
34.5317612,20.8818035 31.8808079,31.4855003 32.668766,65.2217407 "/>
<path id="paint_x5F_brush_x5F_tip" class="st0" d="M40.7088737,19.7361126
c0.7722778-1.1733189,1.775631-3.1726189,1.775631-5.6534939c0-5.1422243-7.0509987-7.2129793-5.3018494-13.0826187
c-0.7470016,0.8390205-5.3017902,7.9498148-5.3017902,13.0826187c0,2.8539448,0.819376,4.633482,1.5470791,5.6534939H40.7088737z"
/>
</g>
<g id="pencil">
<rect id="pencil_x5F_shaft" x="13.5497589" y="38.286869" class="st0" width="13.7482862" height="26.9348717"/>
<polygon id="pencil_x5F_tip" class="st0" points="22.6059189,25.2016068 18.2418861,25.2016068 13.7645836,37.1411209
27.0832214,37.1411209 "/>
<polygon id="pencil_x5F_lead" class="st0" points="20.4239025,19.3829746 18.456768,24.6287041 22.391037,24.6287041 "/>
</g>
</symbol>
the way I'm using it in the HTML is the same for every icon which is like this
<div style="display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-rows: 20vh;">
<div style="grid-area:1/1/2/2;">
<svg class="graphicA">
<use xlink:href="assets/symbol_sprite.svg#illustration_icon" />
</svg>
</div>
<div style="grid-area:1/2/2/3;">
<svg class="graphicA">
<use xlink:href="assets/symbol_sprite.svg#......" />
</svg>
</div>
<div style="grid-area:1/3/2/4;">
<svg class="graphicA">
<use xlink:href="assets/symbol_sprite.svg#......" />
</svg>
</div>
<!-- etc. etc. -->
</div>
You can refer to the plunker for the full code. Does anybody readily see what might be stopping this icon from scaling like the others?


There is a typo in the code, regarding viewBox.
<symbol viewbox="0 0 79 146" id="illustration_icon">
should be:
<symbol viewBox="0 0 79 146" id="illustration_icon">
Working version

Related

SVG image as a cursor pixcelated

I'm using this custom size 64*64 plus icon svg as zoom icon as a cursor in my website. As you can see, it's pixcelated. Specially the white border. Don't know why. Because it's svg it suppose to looks sharp right?
I tried everything.
Increasing border width.
Increasing size.
Set shape-rendering="auto"
None of above working.
Here is my svg code
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg width="64px" height="64px" 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"
viewBox="-285 377 40 40" style="enable-background:new -285 377 40 40;" xml:space="preserve" shape-rendering="auto">
<style type="text/css">
.st0{fill:none;}
.st1{opacity:0.8;fill:none;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;enable-background:new ;}
</style>
<title>zoom_icon</title>
<g>
<title>background</title>
<rect id="canvas_background" x="-286" y="376" class="st0" width="12.6" height="12.6"/>
</g>
<g>
<title>Layer 1</title>
<g id="Layer_2_1_">
<g id="Layer_1-2">
<circle id="svg_1" shape-rendering="geometricPrecision" class="st1" cx="-264.8" cy="397.2" r="18"/>
<line id="svg_2" class="st1" x1="-264.8" y1="386.7" x2="-264.8" y2="407.7"/>
<line id="svg_3" class="st1" x1="-254.3" y1="397.2" x2="-275.3" y2="397.2"/>
</g>
</g>
</g>
</svg>
Here is my the svg file: https://svgshare.com/i/H_C.svg
Here is the real world example. Jsfiddle
What course to pixcelated this image?

you can try removing the circle and just use a border:
.plus {
border: solid white 1px;
border-radius: 50%;
}

Resize svg image

I recently downloaded a linkedin svg image (website: https://www.flaticon.com/free-icon/linkedin_185964?term=linkedin%20logo&page=1&position=15) i have tried endlessly to resize to fit a 16x16 pixel but i can't make it work. I even tried multiple resources online but no success. This is the code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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"
viewBox="0 0 512.002 512.002" style="enable-background:new 0 0 512.002 512.002;" xml:space="preserve">
<circle style="fill:#4376B1;" cx="256.001" cy="256" r="256"/>
<path style="fill:#336699;" d="M511.016,233.634L394.729,117.198c-71.035,9.237-145.27,7.859-216.305,9.511
c-29.306,0-58.613,13.791-53.441,46.545c10.343,65.508,15.515,129.293,3.448,196.525c-1.9,8.545-5.897,17.089-11.117,25.059
L233.48,511.005c7.421,0.646,14.929,0.996,22.519,0.996c141.384,0,256-114.616,256-256
C512.001,248.461,511.656,241.005,511.016,233.634z"/>
<path style="fill:#FFFFFF;" d="M376.023,109.468H135.979c-14.643,0-26.51,11.867-26.51,26.51V376.02
c0,14.639,11.867,26.51,26.51,26.51h240.042c14.639,0,26.51-11.871,26.51-26.51V135.978
C402.533,121.335,390.662,109.468,376.023,109.468L376.023,109.468z M200.155,362.517c0,4.263-3.453,7.716-7.716,7.716h-32.837
c-4.263,0-7.716-3.455-7.716-7.716V224.856c0-4.263,3.455-7.716,7.716-7.716h32.839c4.263,0,7.716,3.455,7.716,7.716v137.661
H200.155z M176.02,204.162c-17.23,0-31.196-13.969-31.196-31.201c0-17.229,13.965-31.196,31.196-31.196
c17.232,0,31.198,13.969,31.198,31.196C207.218,190.195,193.251,204.162,176.02,204.162L176.02,204.162z M371.773,363.139
c0,3.918-3.175,7.096-7.09,7.096h-35.242c-3.915,0-7.092-3.177-7.092-7.096v-64.574c0-9.63,2.826-42.21-25.172-42.21
c-21.719,0-26.124,22.3-27.008,32.304v74.478c0,3.918-3.175,7.096-7.094,7.096h-34.082c-3.918,0-7.096-3.177-7.096-7.096V224.234
c0-3.918,3.177-7.096,7.096-7.096h34.082c3.918,0,7.094,3.177,7.094,7.096v12.009c8.054-12.085,20.023-21.416,45.502-21.416
c56.425,0,56.105,52.717,56.105,81.686v66.627H371.773z"/>
<path style="fill:#D1D1D1;" d="M376.023,109.468H255.427v107.67h7.647c3.918,0,7.094,3.177,7.094,7.096v12.009
c8.054-12.085,20.023-21.416,45.503-21.416c56.425,0,56.105,52.717,56.105,81.686v66.625c0,3.918-3.175,7.096-7.09,7.096h-35.242
c-3.915,0-7.092-3.177-7.092-7.096v-64.574c0-9.63,2.826-42.21-25.172-42.21c-21.719,0-26.124,22.3-27.008,32.304v74.478
c0,3.918-3.175,7.096-7.094,7.096h-7.647v32.301h120.596c14.639,0,26.51-11.871,26.51-26.51V135.978
C402.533,121.335,390.662,109.468,376.023,109.468z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

As suggested by Robert Longson in the comments - you can set the width and height attributes of the SVG node and you will achieve the desired result.
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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="16" height="16"
viewBox="0 0 512.002 512.002" style="enable-background:new 0 0 512.002 512.002;" xml:space="preserve">
<circle style="fill:#4376B1;" cx="256.001" cy="256" r="256"/>
<path style="fill:#336699;" d="M511.016,233.634L394.729,117.198c-71.035,9.237-145.27,7.859-216.305,9.511
c-29.306,0-58.613,13.791-53.441,46.545c10.343,65.508,15.515,129.293,3.448,196.525c-1.9,8.545-5.897,17.089-11.117,25.059
L233.48,511.005c7.421,0.646,14.929,0.996,22.519,0.996c141.384,0,256-114.616,256-256
C512.001,248.461,511.656,241.005,511.016,233.634z"/>
<path style="fill:#FFFFFF;" d="M376.023,109.468H135.979c-14.643,0-26.51,11.867-26.51,26.51V376.02
c0,14.639,11.867,26.51,26.51,26.51h240.042c14.639,0,26.51-11.871,26.51-26.51V135.978
C402.533,121.335,390.662,109.468,376.023,109.468L376.023,109.468z M200.155,362.517c0,4.263-3.453,7.716-7.716,7.716h-32.837
c-4.263,0-7.716-3.455-7.716-7.716V224.856c0-4.263,3.455-7.716,7.716-7.716h32.839c4.263,0,7.716,3.455,7.716,7.716v137.661
H200.155z M176.02,204.162c-17.23,0-31.196-13.969-31.196-31.201c0-17.229,13.965-31.196,31.196-31.196
c17.232,0,31.198,13.969,31.198,31.196C207.218,190.195,193.251,204.162,176.02,204.162L176.02,204.162z M371.773,363.139
c0,3.918-3.175,7.096-7.09,7.096h-35.242c-3.915,0-7.092-3.177-7.092-7.096v-64.574c0-9.63,2.826-42.21-25.172-42.21
c-21.719,0-26.124,22.3-27.008,32.304v74.478c0,3.918-3.175,7.096-7.094,7.096h-34.082c-3.918,0-7.096-3.177-7.096-7.096V224.234
c0-3.918,3.177-7.096,7.096-7.096h34.082c3.918,0,7.094,3.177,7.094,7.096v12.009c8.054-12.085,20.023-21.416,45.502-21.416
c56.425,0,56.105,52.717,56.105,81.686v66.627H371.773z"/>
<path style="fill:#D1D1D1;" d="M376.023,109.468H255.427v107.67h7.647c3.918,0,7.094,3.177,7.094,7.096v12.009
c8.054-12.085,20.023-21.416,45.503-21.416c56.425,0,56.105,52.717,56.105,81.686v66.625c0,3.918-3.175,7.096-7.09,7.096h-35.242
c-3.915,0-7.092-3.177-7.092-7.096v-64.574c0-9.63,2.826-42.21-25.172-42.21c-21.719,0-26.124,22.3-27.008,32.304v74.478
c0,3.918-3.175,7.096-7.094,7.096h-7.647v32.301h120.596c14.639,0,26.51-11.871,26.51-26.51V135.978
C402.533,121.335,390.662,109.468,376.023,109.468z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

<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="16px" height="16px">.....</svg>
set fixed width and height for svg tag...

How can I set the background of SVG to transparent

I created an SVG by Adobe Illustrator and use it in HTML:
<?xml version="1.0" encoding="utf-8" ?>
<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 144 22" enable-background="new 0 0 144 22" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M13.4,10.5c0,2.7,0,5.1,0,7.6c-3.7,0-7.4,0-11.1,0c0-0.6,0-1.1,0-1.7c3,0,6,0,9,0c0-1.3,0-2.5,0-3.8
c-3,0-6,0-9,0c0-2.6,0-5,0-7.5c3.7,0,7.3,0,11,0c0,0.6,0,1.1,0,1.8c-3,0-5.9,0-9,0c0,1.2,0,2.4,0,3.6C7.3,10.5,10.3,10.5,13.4,10.5
z" />
<path fill="#FFFFFF" d="M139.8,18.4c0-0.9,0-1.6,0-2.5c-2.7,0-5.4,0-8.2,0c0-2.9,0-5.6,0-8.3c0.7,0,1.3,0,2.1,0c0,2.1,0,4.2,0,6.3
c2.1,0,4,0,6.1,0c0-2.1,0-4.2,0-6.3c0.8,0,1.4,0,2.1,0c0,4.2,0,8.4,0,12.6c-3.5,0-6.8,0-10.3,0c0-0.6,0-1.1,0-1.8
C134.3,18.4,137,18.4,139.8,18.4z" />
<path fill="#FFFFFF" d="M16.6,18.2c0-3.6,0-7,0-10.6c3.4,0,6.7,0,10.2,0c0,1.9,0,3.9,0,5.9c-2.7,0-5.4,0-8.1,0c0,1,0,1.8,0,2.8
c2.7,0,5.4,0,8.2,0c0,0.7,0,1.2,0,1.8C23.4,18.2,20,18.2,16.6,18.2z M18.6,11.6c2.1,0,4.1,0,6.1,0c0-0.7,0-1.4,0-2
c-2.1,0-4.1,0-6.1,0C18.6,10.3,18.6,11,18.6,11.6z" />
<path fill="#FFFFFF" d="M82.7,18.2c-3.3,0-6.5,0-9.8,0c0-3.5,0-7,0-10.6c2.5,0,5.1,0,7.7,0c0-0.9,0.1-1.6,0.1-2.4c0.7,0,1.3,0,2,0
C82.7,9.5,82.7,13.8,82.7,18.2z M80.6,16.2c0-2.3,0-4.4,0-6.6c-1.9,0-3.8,0-5.6,0c0,2.2,0,4.4,0,6.6C76.9,16.2,78.7,16.2,80.6,16.2
z" />
<path fill="#FFFFFF" d="M39.5,18.2c-3.2,0-6.4,0-9.7,0c0-2,0-4,0-6.2c2.5,0,5,0,7.5,0c0-0.9,0-1.6,0-2.4c-1.6,0-3.3,0-5,0
c0-0.7,0-1.3,0-1.9c2.4,0,4.7,0,7.2,0C39.5,11.1,39.5,14.6,39.5,18.2z M37.3,13.9c-1.9,0-3.7,0-5.5,0c0,0.8,0,1.6,0,2.3
c1.9,0,3.7,0,5.5,0C37.3,15.4,37.3,14.7,37.3,13.9z" />
<path fill="#FFFFFF" d="M99,18.1c0-0.5,0-1,0-1.6c2.6,0,5.3,0,8,0c0-1,0-1.8,0-2.8c-2.6,0-5.2,0-7.9,0c0-2.1,0-4,0-6
c3.3,0,6.6,0,10.1,0c0,0.5,0,1,0,1.6c-2.6,0-5.2,0-8,0c0,0.9,0,1.7,0,2.6c2.6,0,5.3,0,8,0c0,2.2,0,4.2,0,6.3
C105.8,18.1,102.4,18.1,99,18.1z" />
<path fill="#FFFFFF" d="M93.9,16.4c0-2.9,0-5.8,0-8.8c0.7,0,1.4,0,2.1,0c0,3.5,0,7,0,10.6c-3.3,0-6.5,0-9.8,0c0-3.5,0-7,0-10.6
c0.6,0,1.2,0,1.9,0c0,2.9,0,5.8,0,8.8C90,16.4,91.8,16.4,93.9,16.4z" />
<path fill="#FFFFFF" d="M60.2,7.6c3.2,0,6.3,0,9.5,0c0,3.5,0,6.9,0,10.5c-0.6,0-1.2,0-2,0c0-2.8,0-5.7,0-8.6c-1.9,0-3.7,0-5.6,0
c0,2.9,0,5.8,0,8.7c-0.7,0-1.3,0-2,0C60.2,14.6,60.2,11.2,60.2,7.6z" />
<path fill="#FFFFFF" d="M119.3,7.5c0,0.7,0,1.3,0,2c-1.4,0-2.7,0-4.1,0c0,2.3,0,4.4,0,6.7c1.3,0,2.6,0,3.9,0c0,0.7,0,1.2,0,1.8
c-2,0-3.9,0-6,0c0-2.8,0-5.6,0-8.4c-0.6-0.1-1-0.1-1.6-0.2c0-0.6,0-1.2,0-1.8c0.5,0,0.9-0.1,1.4-0.1c0-0.8,0.1-1.7,0.1-2.6
c0.6,0,1.2,0,2,0c0,0.8,0,1.7,0,2.6C116.6,7.5,117.9,7.5,119.3,7.5z" />
<path fill="#FFFFFF" d="M124.1,18.1c-0.8,0-1.4,0-2.1,0c0-3.5,0-7,0-10.5c2.3,0,4.5,0,6.9,0c0,0.6,0,1.2,0,1.8c-1.5,0-3.1,0-4.7,0
C124.1,12.4,124.1,15.2,124.1,18.1z" />
<path fill="#FFFFFF" d="M54.9,5.1c0.7,0,1.3,0,2.1,0c0,4.3,0,8.6,0,13.1c-0.7,0-1.3,0-2.1,0C54.9,13.8,54.9,9.4,54.9,5.1z" />
<path fill="#FFFFFF" d="M45.1,4.7c0,4.5,0,9,0,13.5c-0.7,0-1.3,0-2.1,0c0-4.5,0-8.9,0-13.5C43.7,4.7,44.3,4.7,45.1,4.7z" />
</g>
</svg>
However, it always displays a white background in browser(Chrome ver 75.0.3770.100).
I tried to add the SVG into photoshop that ensures its background is transparent.
Why it turns out to be this? And how can I solve it?
Would you please help me? Thank you.

I found the problem now: whenever I set the container to display: flex. The background will not be transparent.
Solution: set a height(such as 100px) to the SVG element,then it will display now.

Overlay a svg with a transparent background pattern

Question
How can I overlay a transparent image pattern (PNG) over a SVG, while keeping the overlaid image pattern within the SVG's bounds, and keeping the SVG's fill visible?
Kind of like how in CSS you can define both background-color and backgroud-image.
Eg. background: red url(noise.png) top left repeat;
Image Example of what I am looking for
In this image, the balloon on the left is the SVG I currently have. What I'm trying to achieve is how the right balloon looks with noise applied to it.
Code Example:
Here's a code example of what I've tried so far:
FULL DEMO: http://staging.kassandrapoon.com/tests/svg/ (Sorry for the non-jsfiddle or code pen example. The background pattern wasn't loading cross domain)
SVG with my pattern attempt:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="143px" height="214px" viewBox="0 0 143 214" enable-background="new 0 0 143 214" xml:space="preserve">
<defs>
<!-- noise.png -->
<style type="text/css">
<![CDATA[
.filtered{
filter: url(#filter);
}
]]>
</style>
<filter id="filter" filterUnits="userSpaceOnUse">
<feImage xlink:href="noise.png" x="0" y="0" width="198" height="193" result="IMAGEFILL"/>
<feTile in="IMAGEFILL" result="TILEPATTERN"/>
<feComposite operator="in" in="TILEPATTERN" in2="SourceAlpha"/>
</filter>
</defs>
<g>
<g class="filtered">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#DE3F18" points="90.8,214 53.2,214 47.3,175.9 98.1,175.9 "/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#DE3F18" d="M143,72.6c0-39.5-32-71.7-71.5-71.7S0,33.2,0,72.7
C0,79.1,0.9,86,2.4,91.6c0,0,1.3,4.4,2,6.2C4.6,98.2,5,98.6,5.1,99c0.5,1.3,1.2,2.7,1.8,4c0.3,0.6,0.6,1.1,0.9,1.6
c0.6,1.1,1.2,2.3,1.8,3.4c0.3,0.6,0.7,1.1,1,1.7c0.7,1.1,1.3,2.1,2,3.1c0.4,0.5,0.8,1.1,1.1,1.6c0.7,1,1.5,2,2.3,3
c0.4,0.5,0.8,1,1.2,1.4c0.8,1,1.7,1.9,2.6,2.9c0.4,0.4,0.8,0.8,1.2,1.3c1,1,2,1.9,3,2.8c0.4,0.3,0.8,0.7,1.2,1
c0.3,0.2,0.5,0.5,0.8,0.7L46.4,158h2.8h44.5h2.8l20.3-30.6c0.3-0.2,0.5-0.5,0.8-0.7c0.4-0.3,0.8-0.7,1.2-1c1-0.9,2-1.8,3-2.8
c0.4-0.4,0.8-0.8,1.2-1.3c0.9-0.9,1.8-1.9,2.6-2.9c0.4-0.5,0.8-1,1.2-1.4c0.8-1,1.6-2,2.3-3c0.4-0.5,0.8-1,1.1-1.6
c0.7-1,1.4-2.1,2-3.1c0.3-0.6,0.7-1.1,1-1.7c0.6-1.1,1.2-2.2,1.8-3.4c0.3-0.6,0.6-1.1,0.9-1.7c0.6-1.3,1.2-2.6,1.7-4
c0.2-0.4,0.4-0.8,0.5-1.3c0.7-1.8,2.3-7,2.3-7S143,79,143,72.6z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#F9F9EF" d="M126.1,68.4c0-37.4-24.4-68.8-55.2-68.8h0.3h-0.3
C40-0.3,14.7,31.1,14.7,68.4c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1c0,6,1.2,12.5,2.2,17.2c0.2,0.8,0.9,2.6,1.3,4.2c0.4,1,0.9,2,1.3,3.2
c0.3,1,0.8,1.9,1.1,2.9c0.4,0.8,0.7,1.5,1.1,2.4c0.5,1.1,0.9,2.1,1.3,3l0.9,1.8c0.5,1,1,2,1.6,2.9l0.9,1.5c0,0.1,0.1,0.1,0.1,0.2
c0.6,0.9,1.1,1.8,1.6,2.6c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0.3,0.5,0.6,0.9,1,1.4c0.7,0.9,29.4,46.8,29.4,46.8h25.7
c0,0,28.7-45.8,29.4-46.8c0.3-0.5,0.6-0.9,1-1.4c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0.5-0.8,1.1-1.6,1.6-2.6
c0-0.1,0.1-0.1,0.1-0.2l0.9-1.5c0.5-0.9,1-1.9,1.6-2.9l0.9-1.8c0.4-0.8,0.9-1.9,1.3-3c0.3-0.8,0.7-1.6,1-2.4
c0.4-0.9,0.8-1.9,1.1-2.9c0.4-1.2,0.8-2.2,1.2-3.2c0.4-1.6,0.2-3.3,0.4-4.2c1.1-4.6,1.1-11.2,1.1-17.2
C126.1,68.6,126.1,68.5,126.1,68.4C126.1,68.5,126.1,68.4,126.1,68.4z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#DE3F18" d="M91.9,57.1c0,43.5-21.6,101-21.6,101s-21.6-57.5-21.6-101
S58.9,0.7,70.4,0.7C79.1,0.7,91.9,13.6,91.9,57.1z"/>
<polyline fill="none" stroke="#FC611F" stroke-width="1.8927" stroke-miterlimit="10" points="47.9,175.9 27.8,130 70.6,130
115.2,130.1 96.5,175.9 "/>
<line fill="none" stroke="#FC611F" stroke-width="1.8927" stroke-miterlimit="10" x1="73.2" y1="175.9" x2="72.3" y2="130"/>
<g>
<polygon fill="#DE3F18" points="46.4,158 49.3,158 93.7,158 96.6,158 115.3,130 27.7,130 "/>
</g>
</g>
<g>
<g>
<path fill="#F9F9EF" d="M102.6,188.6c0,5.5-2.3,7.4-5.1,7.4c-2.8,0-5.1-1.9-5.1-7.4s5.1-12.6,5.1-12.6S102.6,183,102.6,188.6z"/>
<path fill="#F9F9EF" d="M77.6,188.6c0,5.5-2.3,7.4-5.1,7.4c-2.8,0-5.1-1.9-5.1-7.4s5.1-12.6,5.1-12.6S77.6,183,77.6,188.6z"/>
<path fill="#F9F9EF" d="M52.6,188.6c0,5.5-2.3,7.4-5.1,7.4c-2.8,0-5.1-1.9-5.1-7.4s5.1-12.6,5.1-12.6S52.6,183,52.6,188.6z"/>
</g>
</g>
</g>
</svg>
I've tried defining a pattern in the SVG like here, but that replaces the existing fill color which I want to keep.

How use multiple SVG with different size

I try to integrate SVG icon on my web site, don't they are a thing i don't understand..
I have download 2 SVG icons :
Heart
<svg width="0" height="0" viewBox="0 0 32 32" style="position:absolute;margin-left: -100%;">
<path id ="home-icon" d="M57.062,31.398c0.932-1.025,0.842-2.596-0.201-3.508L33.884,7.785c-1.043-0.912-2.715-0.893-3.736,0.043L7.093,28.962
c-1.021,0.936-1.071,2.505-0.111,3.503l0.578,0.602c0.959,0.998,2.509,1.117,3.46,0.265l1.723-1.543v22.59
c0,1.386,1.123,2.508,2.508,2.508h8.987c1.385,0,2.508-1.122,2.508-2.508V38.575h11.463v15.804c-0.02,1.385,0.971,2.507,2.356,2.507
h9.524c1.385,0,2.508-1.122,2.508-2.508V32.107c0,0,0.476,0.417,1.063,0.933c0.586,0.515,1.817,0.102,2.749-0.924L57.062,31.398z"/>
</svg>
Project
<svg width="0" height="0" viewBox="0 0 64 64" style="position:absolute;margin-left: -100%;">
<g id="projects-icon">
<polygon points="22,6 22,10 28,16 22,22 22,26 32,16 "/>
<polygon points="10,10 10,6 0,16 10,26 10,22 4,16 "/>
<polygon points="18,12 10,20 14,20 22,12 "/>
</g>
</svg>
But the Heart icon is drawed for 32x32 and Project for 64x64, so when I try to use both on my menu, i must specify the image size in the viewBox item:
<nav id="top-menu">
<svg class="menu-icon" viewBox="0 0 32 32">
<use xlink:href="#heart-icon">
</svg>
<svg class="menu-icon" viewBox="0 0 64 64">
<use xlink:href="#project-icon">
</svg>
</nav>
Exemple on jsfiddle : http://jsfiddle.net/Nh57e/
In this case, i can't loop on my HTML and i must set size on HTML each time I want use an image.. (And if I want change the SVG, i need update all the html source for the new size :/ )
How can i do for use image without set the icon size ??
Thank all !

One solution would be to reference the whole SVGs rather than just parts of them.
In this version, we hide them in a hidden <div> rather than setting their sizes to zero:
<div style="display:none">
<svg id="project-icon" viewBox="0 0 32 32">
<g>
<polygon points="22,6 22,10 28,16 22,22 22,26 32,16 "/>
<polygon points="10,10 10,6 0,16 10,26 10,22 4,16 "/>
<polygon points="18,12 10,20 14,20 22,12 "/>
</g>
</svg>
</div>
I have taken out the width and height attributes here so that they default to 100%.
Then reference them from mini-SVGs that have the exact width and height you want:
<svg class="menu-icon" width="32px" height="32px">
<use xlink:href="#home-icon" />
</svg>
Demo here
Note. In your demo you had the viewBox sizes for the two SVGs back to front.

Another alternative is to use the symbol element. You can set a viewPort for each icon. And then reference them the same way you are currently.
<svg style="display: none;">
<symbol id="home-icon" viewBox="0 0 64 64">
<path d="M57.062,31.398c0.932-1.025,0.842-2.596-0.201-3.508L33.884,7.785c-1.043-0.912-2.715-0.893-3.736,0.043L7.093,28.962
c-1.021,0.936-1.071,2.505-0.111,3.503l0.578,0.602c0.959,0.998,2.509,1.117,3.46,0.265l1.723-1.543v22.59
c0,1.386,1.123,2.508,2.508,2.508h8.987c1.385,0,2.508-1.122,2.508-2.508V38.575h11.463v15.804c-0.02,1.385,0.971,2.507,2.356,2.507
h9.524c1.385,0,2.508-1.122,2.508-2.508V32.107c0,0,0.476,0.417,1.063,0.933c0.586,0.515,1.817,0.102,2.749-0.924L57.062,31.398z"/>
</symbol>
<symbol id="project-icon" viewBox="0 0 32 32">
<g>
<polygon points="22,6 22,10 28,16 22,22 22,26 32,16 "/>
<polygon points="10,10 10,6 0,16 10,26 10,22 4,16 "/>
<polygon points="18,12 10,20 14,20 22,12 "/>
</g>
</symbol>
</svg>
.menu-icon {
width: 32px;
height: 32px;
fill: #aaa;
}
<svg style="display: none;">
<symbol id="home-icon" viewBox="0 0 64 64">
<path d="M57.062,31.398c0.932-1.025,0.842-2.596-0.201-3.508L33.884,7.785c-1.043-0.912-2.715-0.893-3.736,0.043L7.093,28.962
c-1.021,0.936-1.071,2.505-0.111,3.503l0.578,0.602c0.959,0.998,2.509,1.117,3.46,0.265l1.723-1.543v22.59
c0,1.386,1.123,2.508,2.508,2.508h8.987c1.385,0,2.508-1.122,2.508-2.508V38.575h11.463v15.804c-0.02,1.385,0.971,2.507,2.356,2.507
h9.524c1.385,0,2.508-1.122,2.508-2.508V32.107c0,0,0.476,0.417,1.063,0.933c0.586,0.515,1.817,0.102,2.749-0.924L57.062,31.398z"/>
</symbol>
<symbol id="project-icon" viewBox="0 0 32 32">
<g>
<polygon points="22,6 22,10 28,16 22,22 22,26 32,16 "/>
<polygon points="10,10 10,6 0,16 10,26 10,22 4,16 "/>
<polygon points="18,12 10,20 14,20 22,12 "/>
</g>
</symbol>
</svg>
<nav id="top-menu">
home icon
<br/>
<svg class="menu-icon">
<use xlink:href="#home-icon" />
</svg>
<br/>
project icon
<br/>
<svg class="menu-icon">
<use xlink:href="#project-icon" />
</svg>
</nav>
Reference: css-tricks
Original demo on codepen (before I realized you can insert code snippets directly).

One way will be to edit the icons that will be listed together
so you will wrap it inside another group with consistent size