Embed SVG in Html (specify width and height)

April 8, 2019

img

<img style="width: 100px; height: auto;" src="image.svg" />

Inline SVG

<svg width="100px" height="auto" version="1.1" viewBox="0 0 108 108" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
 <g transform="translate(-121.33 -169.34)">
  <path d="m175.33 169.34-27.428 0.42861c-5.1642 13.48-14.706 16.096-21 17.143v31.286c3.396 25.107 18.939 49.389 48.428 59.143 29.489-9.7535 45.033-34.036 48.429-59.143v-31.286c-6.2945-1.0464-15.836-3.663-21-17.143z" fill="#ff5a5f"/>
  <circle cx="175.33" cy="219.49" r="29.143" fill="#fff" style="paint-order:markers fill stroke"/>
  <path d="m165.13 203.05c-5.7502-0.0385-9.9186 4.7927-11.57 9.3704-3.9585 10.972 12.849 19.223 21.774 27.393 8.9243-8.1696 25.732-16.421 21.774-27.393-2.5167-6.9756-10.878-14.539-21.774-4.5654-3.7456-3.4286-7.1915-4.7849-10.203-4.805z" fill="#119da4"/>
 </g>
</svg>

NOTE: Browser support for Inline SVG in HTML5

TIPS: Compress SVG

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.