Resize svg image - html

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...

Related

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.

SVG not displaying in any browser

I am trying to get an SVG to display in a HTML webpage, but I must be missing something.
I have a svg file called logo-a.svg this is the code for it:
<svg x="0px" y="0px" width="197px" height="71px" viewbox="0 0 346 51">
<style type="text/css">
.Arched_x0020_Green{fill:url(#SVGID_1_);stroke:#FFFFFF;stroke-width:0.25;stroke-miterlimit:1;}
.st0{fill:#008751;}
.st1{fill:#FFFFFF;}
.st2{fill:#F9FBFB;}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-32.7222" y1="228.6171" x2="-32.0151" y2="227.9099">
<stop offset="0" style="stop-color:#20AC4B"/>
<stop offset="0.9831" style="stop-color:#19361A"/>
</linearGradient>
<rect y="-0.1" class="st0" width="315.63" height="59.33"/>
<g>
<path class="st1" d="M289.44,54.22c-1.58,1.58-4.15,1.58-5.73,0l-22.21-22.21c-1.58-1.58-1.58-4.15,0-5.73L283.7,4.06
c1.58-1.58,4.15-1.58,5.73,0l22.21,22.21c1.58,1.58,1.58,4.15,0,5.73L289.44,54.22z"/>
<path class="st1" d="M68.19,30.39c0-8.81,5.82-20.2,21.28-20.2c12.83,0,20.82,7.47,20.82,19.27c0,11.8-8.24,21.12-21.33,21.12
C74.17,50.59,68.19,39.51,68.19,30.39z M103.08,31.37c0-11.54-6.65-18.7-15.1-18.7c-5.93,0-12.68,3.3-12.68,16.13
c0,10.72,5.92,19.22,15.82,19.22C94.73,48.01,103.08,46.26,103.08,31.37z"/>
<path class="st2" d="M13.81,36.42c-0.26,0-0.36,0.1-0.46,0.41l-2.78,7.37c-0.52,1.29-0.77,2.53-0.77,3.14c0,0.93,0.46,1.6,2.06,1.6
h0.77c0.62,0,0.77,0.1,0.77,0.41c0,0.41-0.31,0.51-0.87,0.51c-1.65,0-3.86-0.15-5.46-0.15c-0.57,0-3.4,0.15-6.08,0.15
C0.31,49.87,0,49.76,0,49.35c0-0.31,0.21-0.41,0.62-0.41c0.47,0,1.18-0.05,1.6-0.1c2.37-0.31,3.35-2.06,4.38-4.64l12.93-32.36
c0.62-1.49,0.93-2.06,1.44-2.06c0.46,0,0.77,0.46,1.29,1.65c1.24,2.83,9.48,23.86,12.78,31.69c1.96,4.64,3.45,5.36,4.53,5.62
c0.77,0.15,1.55,0.21,2.16,0.21c0.41,0,0.67,0.05,0.67,0.41c0,0.41-0.46,0.51-2.37,0.51c-1.86,0-5.62,0-9.74-0.11
c-0.93-0.05-1.55-0.05-1.55-0.41c0-0.31,0.21-0.41,0.72-0.47c0.36-0.1,0.72-0.56,0.46-1.18l-4.12-10.92
c-0.1-0.26-0.26-0.36-0.52-0.36H13.81z M24.32,33.84c0.26,0,0.31-0.16,0.26-0.31L19.94,20.8c-0.05-0.21-0.1-0.46-0.26-0.46
c-0.15,0-0.26,0.26-0.31,0.46l-4.74,12.68c-0.05,0.21,0,0.36,0.21,0.36H24.32z"/>
<path class="st1" d="M29.14,49.76c-0.9-0.07,3.01-0.17,3.01-1.3c0-2.83-2.31-9.34-2.26-10.16c0.05-0.77,0.2-1.34,0.62-1.34
c0.46,0,0.52,0.46,0.52,0.88c0,0.67,0.22-0.97,0.55-0.11c3.6,9.41,13.99,10.96,19.98,10.39c4.62-0.44,6.9-3.14,6.9-5.87
c0-2.52-0.77-4.89-5.05-8.24l-2.37-1.86c-5.67-4.43-7.63-8.04-7.63-12.21c0-5.67,4.74-9.74,11.9-9.74c3.35,0,5.51,0.52,6.85,0.88
c0.46,0.1,0.72,0.26,0.72,0.62c0,0.67-0.21,2.17-0.21,6.19c0,1.13-0.15,1.55-0.57,1.55c-0.36,0-0.51-0.31-0.51-0.93
c0-0.47-0.26-2.06-1.34-3.4c-0.77-0.98-2.27-2.53-5.62-2.53c-3.81,0-6.13,2.22-6.13,5.31c0,2.37,1.19,4.17,5.46,7.42l1.44,1.08
c6.23,4.69,8.45,8.25,8.45,13.14c0,2.99-1.13,6.54-4.84,8.96c-2.58,1.65-5.46,2.11-8.19,2.11C47.84,50.59,31.33,49.94,29.14,49.76z
"/>
<path class="st1" d="M115.85,25.85c0-7.83,0-9.27-0.1-10.92c-0.11-1.75-0.52-2.58-2.22-2.94c-0.41-0.1-1.29-0.15-2.01-0.15
c-0.57,0-0.88-0.1-0.88-0.46c0-0.36,0.36-0.46,1.13-0.46c2.73,0,5.98,0.15,7.06,0.15c1.75,0,5.67-0.15,7.26-0.15
c3.25,0,6.7,0.31,9.48,2.22c1.45,0.98,3.51,3.61,3.51,7.06c0,3.81-1.6,7.32-6.8,11.54c4.58,5.77,8.14,10.35,11.18,13.55
c2.89,2.99,5,3.35,5.77,3.5c0.57,0.1,1.03,0.16,1.44,0.16c0.41,0,0.62,0.16,0.62,0.41c0,0.41-0.36,0.51-0.98,0.51h-4.89
c-2.89,0-4.18-0.26-5.51-0.98c-2.22-1.18-4.17-3.61-7.06-7.57c-2.06-2.84-4.43-6.34-5.1-7.11c-0.26-0.31-0.57-0.36-0.93-0.36
l-4.48-0.1c-0.26,0-0.41,0.1-0.41,0.41v0.72c0,4.79,0,8.87,0.26,11.03c0.15,1.49,0.46,2.63,2.01,2.84c0.77,0.1,1.9,0.21,2.52,0.21
c0.41,0,0.62,0.16,0.62,0.41c0,0.36-0.36,0.51-1.03,0.51c-2.99,0-6.8-0.15-7.57-0.15c-0.98,0-4.23,0.15-6.29,0.15
c-0.67,0-1.03-0.15-1.03-0.51c0-0.26,0.2-0.41,0.82-0.41c0.77,0,1.39-0.1,1.86-0.21c1.03-0.21,1.29-1.34,1.49-2.84
c0.26-2.16,0.26-6.23,0.26-10.97V25.85z M121.93,29.93c0,0.57,0.1,0.77,0.46,0.93c1.08,0.36,2.63,0.52,3.92,0.52
c2.06,0,2.73-0.21,3.66-0.88c1.54-1.14,3.04-3.5,3.04-7.73c0-7.32-4.85-9.43-7.88-9.43c-1.29,0-2.21,0.05-2.73,0.21
c-0.36,0.1-0.46,0.31-0.46,0.72V29.93z"/>
<path class="st1" d="M144.82,30.39c0-8.81,5.82-20.2,21.28-20.2c12.83,0,20.82,7.47,20.82,19.27c0,11.8-8.24,21.12-21.33,21.12
C150.8,50.59,144.82,39.51,144.82,30.39z M179.7,31.37c0-11.54-6.65-18.7-15.1-18.7c-5.93,0-12.68,3.3-12.68,16.13
c0,10.72,5.93,19.22,15.82,19.22C171.36,48.01,179.7,46.26,179.7,31.37z"/>
<g>
<g>
<path class="st1" d="M272.7,48.93c-0.63,0-1.65-0.15-3.21-0.77c-2.79-1.09-5.12-3.41-7.39-5.58
c-2.01-1.91-10.67-11.2-12.56-13.67l-0.07-0.05c-0.62,0.81-1.84,2.3-3.55,4.14c2.16,2.71,9.62,11.53,11.74,13.4
c2.22,1.97,3.62,3.1,6.41,3.36c1.09,0.11,2.02,0.11,3.56,0.11h4.51c0.98,0,1.24-0.15,1.24-0.52
C273.37,49.04,273.07,48.93,272.7,48.93z"/>
</g>
<path class="st1" d="M243.64,30.23h-0.26v2.55c0.42-0.44,0.83-0.87,1.2-1.28c-0.17-0.21-0.3-0.38-0.38-0.49L243.64,30.23z"/>
<path class="st1" d="M228.24,43.22c-2.75,1.51-7.52,4.34-14.47,4.37c-6.9,0.03-16.23-6.08-16.23-18.34c0-5,0.98-9.89,4.74-13.34
c2.27-2.06,5.21-3.19,9.69-3.19c4.74,0,8.76,1.39,10.46,3.19c1.29,1.34,1.96,3.14,2.01,4.74c0,0.72,0.1,1.13,0.52,1.13
c0.46,0,0.56-0.41,0.62-1.19c0.11-1.03,0.05-3.86,0.16-5.57c0.1-1.8,0.26-2.42,0.26-2.83c0-0.31-0.2-0.57-0.77-0.62
c-1.54-0.15-3.19-0.62-5.15-0.88c-2.37-0.31-4.28-0.52-7.47-0.52c-7.68,0-12.57,2.06-16.28,5.46c-4.95,4.54-6.03,10.62-6.03,14.12
c0,5,1.34,10.77,6.39,15.2c4.69,4.07,10.63,6.08,17.67,5.62c7.93-0.52,16.29-6.13,22.77-11.78c0-0.77,0.01-1.57,0.01-2.39
C234.24,39.16,231.24,41.58,228.24,43.22z"/>
<path class="st1" d="M243.17,26.32h-0.24v-2.18c0-7.52,0-7.79,0.1-9.37c0.1-1.73,0.5-2.57,1.83-2.82c0.59-0.1,0.89-0.15,1.38-0.15
c0.4,0,0.69-0.1,0.69-0.45c0-0.34-0.35-0.44-1.04-0.44c-1.68,0-4.8,0.15-5.98,0.15c-1.19,0-4.3-0.15-6.92-0.15
c-0.74,0-1.09,0.1-1.09,0.44c0,0.35,0.29,0.45,0.84,0.45c0.69,0,1.54,0.05,1.93,0.15c1.63,0.35,2.03,1.14,2.13,2.82
c0.1,1.58,0.1,1.86,0.1,9.37v8.71c0,0.49,0,0.41,0,0.88C241.55,29.25,244.09,25.32,243.17,26.32z"/>
<g>
<path class="st1" d="M237.47,41.41c-0.02,2.93-0.07,3.12-0.25,4.62c-0.2,1.44-0.45,2.54-1.44,2.74c-0.45,0.1-1.05,0.2-1.79,0.2
c-0.6,0-0.8,0.15-0.8,0.4c0,0.35,0.35,0.5,1,0.5c1.99,0,5.13-0.15,6.28-0.15c1.24,0,4.38,0.15,7.18,0.15
c0.54,0,0.95-0.15,0.95-0.5c0-0.25-0.25-0.4-0.65-0.4c-0.65,0-1.74-0.1-2.44-0.2c-1.25-0.2-1.7-1.3-1.8-2.69
c-0.15-2.14-0.15-6.08-0.15-10.67v0.17C241.85,37.37,239.79,39.39,237.47,41.41z"/>
</g>
<path class="st1" d="M254.09,17.15c-0.85,0.95-2.52,2.7-4.3,4.56c-3.38,4.44-7.83,10.05-12.68,14.71c0,0.82,0,1.62-0.01,2.39
c2.4-2.09,4.53-4.18,6.29-6.03v-2.55h0.26l0.57,0.77c0.08,0.11,0.21,0.28,0.38,0.49c2.42-2.63,3.89-4.53,3.98-4.77
C248.78,26.17,252.11,20.62,254.09,17.15z"/>
<path class="st1" d="M248.18,27.4c1.76-1.85,9.54-9.58,11.13-11.13c2.22-2.16,3.97-3.25,5.57-3.86c0.98-0.36,2.27-0.57,2.99-0.57
c0.51,0,0.77-0.1,0.77-0.46c0-0.36-0.36-0.46-0.88-0.46c-1.6,0-4.43,0.15-6.03,0.15c-1.39,0-4.23-0.15-5.31-0.15
c-0.57,0-0.82,0.1-0.82,0.46c0,0.31,0.2,0.41,0.67,0.52c0.52,0.1,0.72,0.46,0.72,1.03c0,0.88-1.13,2.16-2.58,3.86
c-0.09,0.1-0.2,0.23-0.33,0.37c-1.98,3.47-5.3,9.02-5.51,9.57c-0.02,0.07-0.18,0.3-0.45,0.65l0.07,0.05
C248.19,27.41,248.19,27.4,248.18,27.4z"/>
</g>
<path class="st0" d="M269.57,31.17c1.44,0.11,2.81,0.4,4.23,0.51c4.83,0.36,9.84,0,14.55,0c2.54,0,5.04,0,7.45,0
c2.23,0,4.75,0.48,6.6-0.85c0-0.34,0-0.68,0-1.02c-3.06-4.04-13.16-4.06-21.15-4.06c-1.2,0-2.55-0.05-3.72,0
c-1.24,0.06-2.63-0.03-3.39,0.17c-0.81,0.21-1.85,1.85-2.71,2.2c-2.24,0.93-6.39,0.38-9.47,0.51c-1.13,0.05-2.29,0.07-3.44,0.08
c0.46,0.57,1.16,1.37,1.98,2.3C263.55,30.9,266.61,30.95,269.57,31.17z"/>
<path class="st0" d="M270.82,20.5c2.94,0,6.47-0.57,8.8,0.17c1.15,0.36,1.73,1.51,2.88,2.03c1.11,0.5,2.65,0.79,4.23,0.85
c4.78,0.16,9.63-0.8,14.21-1.18c-4.03-0.6-9.61,0.37-13.37-0.51c0.6-0.93,1.98-0.61,3.04-0.67c3.1-0.19,7.23-0.16,10.32-0.51
c-1.19-0.67-3.06-0.26-4.91-0.34c-2.87-0.12-6.06,0-8.46-0.51c0.27-0.66,1.13-0.61,1.69-0.68c3.4-0.39,8.29,0.41,11.68-0.17
c-0.84-0.52-2.14-0.46-3.39-0.51c-2.24-0.08-5.09,0.03-7.61-0.17c-0.77-0.06-2.02-0.01-2.37-0.85c4.04-0.67,8.73,0.08,13.37-0.17
c-0.3-0.57-1.15-0.43-1.69-0.51c-1.69-0.24-3.6-0.35-5.58-0.51c-3.73-0.29-7.91-0.85-10.83,0.34c-1.17,0.48-2.44,1.93-3.56,2.2
c-1.15,0.28-2.97,0.15-4.4,0.17c-2.41,0.04-4.69,0.03-6.92-0.02c-0.48,0.48-1.03,1.02-1.6,1.59
C267.84,20.52,269.33,20.5,270.82,20.5z"/>
<path class="st0" d="M296.33,35.11c-3.52-1.94-9.5-2.63-13.03-0.34c-1.33,0.86-2.26,2.74-3.73,3.22c-1.09,0.36-2.88,0.28-4.4,0.34
c-2.6,0.11-5.37,0.02-8.03-0.14c0.6,0.63,1.13,1.16,1.52,1.55c2.27-0.03,4.56,0,6.86,0.11c1.65,0.08,3.05-0.12,4.23,0.34
c1.52,0.59,2.35,2.55,3.89,3.38c3.54,1.91,9.29,1.21,12.69-0.67c1.71-0.95,3.38-2.1,3.38-3.89
C299.71,36.92,297.62,35.82,296.33,35.11z"/>
</g>
</svg>
Then I have a page in my website trying to display it like this:
<div class="brand-logo">
<object id="svg1" data="/images/logo-a.svg" type="image/svg+xml"></object>
</div>
What am I doing wrong? The SVG was created in illustrator, not sure if that makes any difference though.

Your svg is not real svg, just an xml file while you don't declare its namespace
<svg x="0px" y="0px" width="197px" height="71px" viewbox="0 0 346 51"
xmlns="http://www.w3.org/2000/svg"
>

SVG <symbol> won't scale like the others

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

Why is text cutting off in SVG Text on Chrome?

I have a Logo for my new website.
The logo looks great in Firefox but as you can see the S on Tomorrow's is cut off in Chrome. Why is this?
http://jsfiddle.net/pro5Lgfx/
body {
background:black
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="195px" height="53px" viewBox="0 0 195 53" 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">
<title>Logo</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Your-Score" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Desktop-Your-Score" sketch:type="MSLayerGroup" transform="translate(-23.000000, -24.000000)" font-weight="normal" font-family="Gill Sans" letter-spacing="1.16666663" font-size="28" sketch:alignment="middle" fill="#FFFFFF">
<g id="Header" sketch:type="MSTextLayer">
<g id="Primary-Nav-[home]-Copy">
<g id="Logo" transform="translate(23.000000, 18.000000)">
<text id="TOMORROW’S">
<tspan x="0.0328778028" y="26">TOMORROW’S</tspan>
<tspan x="36.2975262" y="58">SCORE</tspan>
</text>
</g>
</g>
</g>
</g>
</g>
</svg>

DEMO
I'm no expert in SVG but After Researching a bit ViewBox is
viewBox as the "real" coordinate system, it is the coordinate system
used to draw the SVG graphics onto the canvas Yo can specify
coordinate to viewbox attribute
Source MDN ViewBox Source ViewBox
what i came up when i set viewbox width and height to 100% 100% S was visible in chrome as well
Update
well percentage is supported in viewport(i.e width and height) but not in viewbox,better not put viewbox and viewport unless needed (viewport: width=100% and height=100% will not harm the output)
New DEMO
Example
<svg 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">
body {
background: black
}
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg version="1.1" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Logo</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Your-Score" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Desktop-Your-Score" sketch:type="MSLayerGroup" transform="translate(-23.000000, -24.000000)" font-weight="normal" font-family="Gill Sans" letter-spacing="1.16666663" font-size="28" sketch:alignment="middle" fill="#FFFFFF">
<g id="Header" sketch:type="MSTextLayer">
<g id="Primary-Nav-[home]-Copy">
<g id="Logo" transform="translate(23.000000, 18.000000)">
<text id="TOMORROW’S">
<tspan x="0.0328778028" y="27">TOMORROW’S</tspan>
<tspan x="36.2975262" y="58">SCORE</tspan>
</text>
</g>
</g>
</g>
</g>
</g>
</svg>

SVG Horizontal Dashed Circle

I'm trying to create the following as an SVG:
I.e. a circle with dashed horizontal lines.
This is the SVG code I have at the moment...generated by Adobe Illustrator:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="165px" height="165px" viewBox="0 0 165 165" enable-background="new 0 0 165 165" xml:space="preserve">
<g>
<circle fill="none" stroke="#000000" stroke-width="9" stroke-miterlimit="23" stroke-dasharray="1.0048,6.0288" cx="82.453" cy="82.563" r="75"/>
</g>
</svg>
But when I open in Chrome the lines seem to be very jagged and some lines are closer then others.
Is there a better way to produce this SVG or shall I simply use a PNG?

Here's a different approach to produce the same appearance which should be more stable across renderers, by using actual line segments rather than very short stroke dashes.
I've used <defs> and <use> to keep the repetition sane — I define four axis-aligned lines around a center and then rotate it by a quarter-circle of even steps. (I changed the scale a bit for the sake of round numbers in my example.)
Note that if zoomed in it will be slightly different: in the original, each dash will be slightly wedge-shaped (due to the curve of the circle), whereas here they will have a constant width since they are just plain line segments.
<svg width="160px" height="160px" viewBox="0 0 160 160">
<defs>
<g id="lines" style="stroke: black;">
<line x1=" 71" x2=" 79" />
<line x1="-71" x2="-79" />
<line y1=" 71" y2=" 79" />
<line y1="-71" y2="-79" />
</g>
</defs>
<g transform="translate(80 80)">
<use xlink:href="#lines" transform="rotate( 0)"/>
<use xlink:href="#lines" transform="rotate( 5)"/>
<use xlink:href="#lines" transform="rotate(10)"/>
<use xlink:href="#lines" transform="rotate(15)"/>
<use xlink:href="#lines" transform="rotate(20)"/>
<use xlink:href="#lines" transform="rotate(25)"/>
<use xlink:href="#lines" transform="rotate(30)"/>
<use xlink:href="#lines" transform="rotate(35)"/>
<use xlink:href="#lines" transform="rotate(40)"/>
<use xlink:href="#lines" transform="rotate(45)"/>
<use xlink:href="#lines" transform="rotate(50)"/>
<use xlink:href="#lines" transform="rotate(55)"/>
<use xlink:href="#lines" transform="rotate(60)"/>
<use xlink:href="#lines" transform="rotate(65)"/>
<use xlink:href="#lines" transform="rotate(70)"/>
<use xlink:href="#lines" transform="rotate(75)"/>
<use xlink:href="#lines" transform="rotate(80)"/>
<use xlink:href="#lines" transform="rotate(85)"/>
</g>
</svg>
This is a SVG-in-HTML fragment — if using it as a standalone SVG document don't forget to put the xmlns back in.

Here is an alternative approach with the same tick count and tick size.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="165px" height="165px" viewBox="0 0 165 165">
<g transform="translate(82.453 82.563)">
<g id="t32">
<g id="t16">
<g id="t8">
<g id="t4">
<g id="t3">
<rect x="70.5" y="-0.5024" width="9" height="1.0048" id="t"/>
<use xlink:href="#t" transform="rotate(5.37)"/>
<use xlink:href="#t" transform="rotate(10.75)"/>
</g>
<use xlink:href="#t" transform="rotate(16.12)"/>
</g>
<use xlink:href="#t4" transform="rotate(21.49)"/>
</g>
<use xlink:href="#t8" transform="rotate(42.99)"/>
</g>
<use xlink:href="#t16" transform="rotate(85.97)"/>
</g>
<use xlink:href="#t32" transform="rotate(171.94)"/>
<use xlink:href="#t3" transform="rotate(343.88)"/>
</g>
</svg>