CODEWITHSUNDEEP
htmlcss
E-WAVE
E-WAVE

Reputation: 117

How do i implement an svg file in an HTML code

I am working on a simple user webpage and I came across a svg file as an image. So I am not sure if I am to use it as the normal tag in HTML or otherwise. Any form of help will be appreciated

Upvotes: 1

Views: 56

Answers (1)

luek baja
luek baja

Reputation: 1674

Just like a normal image, you can set the source of an img tag to the path of your svg:

<img src="picture.svg" width="100" height="200" />

However, if you are depending on adding custom CSS to the svg, you cannot use an img tag. Then you have to add the svg code directly to your HTML document:

<body>
    <svg class="my-svg">
      <rect width="300" height="100" />
    </svg>
</body>

.my-svg rect {
  fill: red
  stroke-width: 3px;
  stroke: black;
}

Upvotes: 3

Related Questions