Embed SVG in Html (specify width and height)

Apr 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

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.