html svg code example

Example 1: bring to front svg html

//In SVG, to get a higher larger Z index you should move the element down in the DOM tree
$('g.element').remove().appendTo('svg'); // with jquery

Example 2: SVG Tutorial

<html>
<body>

<h1>My first SVG</h1>

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

</body>
</html>

Example 3: add svg to html

<!-- external svg -->
<img src="mySvgImage.svg" />

<!-- internal svg example -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" x="50" y="50"/>
</svg>

Example 4: html img svg

<img
    src="equilateral.svg"
    alt="un triangle aux trois côtés égaux"
    height="87px"
    width="100px" />

Example 5: html svg

<svg width="100" height="100">  <!-- Draws a circle -->
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<svg width="400" height="100">  <!-- Draws a rectangle -->
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
<svg width="300" height="200">  <!-- Draws a star -->
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

Example 6: html svg

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

Tags:

Html Example

Recent Posts