-1

I have a SVG image and I plug it in using the next HTML

<img alt="" src="src/icons/speedometer-outline.svg" />

How to change the styles of this image from CSS or HTML?

When I use <object> styles aren't changing. I think that I do something incorrectly. What is the correct way?

Kameron
  • 10,240
  • 4
  • 13
  • 26
Aлександр Агафонов
  • 1
  • 2

2 Answers2

0

It depends. If you were putting in your SVG via <svg> tag then you could style it that way. Like so:

svg {
  style: styles;
}

OR since you're not using an <svg> tag and an img rather you can just apply a class to your image to style it. It would look something like:

<img class="classname" src="src/icons/speedometer-outline.svg" alt="" />

.classname {
    style: styles;
}

If you don't want to use CSS, you could use inline styles in your HTML like so:

<img style="style: styles;" src="src/icons/speedometer-outline.svg" alt="" />
Kameron
  • 10,240
  • 4
  • 13
  • 26
0

It depends what do you mean by 'changing styles of this image'.

You would have more control over the styling of the internal elements of SVG if you place it directly into html (using tag instead of tag).

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="black" />
</svg>

Then you can add classes/id's to particular elements inside the SVG. more info in here, here and here.

You can also use tag:

<object type="image/svg+xml" data="image.svg"></object>
barticusPrime
  • 29
  • 3