Embedding SVG in HTML

Question

I'm trying to understand something very basic about using SVGs in HTML:

I know all about the different methods: as <img>, as inline, and as <object>. But regarding the latter, I just can't figure how SVG properties are then controlled.

I'd like to change the fill colour, for instance. I can do it by editing the .svg file itself. But can I also do it from my CSS stylesheet? I'm assuming that adding <style> tags in the .svg file is probably not the recommended solution.

Answer 1

Use fill instead background-color to style background color

and stroke instead border

Learn here:https://www.w3schools.com/html/html5_svg.asp

For example

svg circle{
fill:red;
stroke:pink;
}
svg path{
fill:red;
}

<p>Shape</p>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4"/>
</svg>

<p>with Path:</p>
<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>