html css svg code example

Example 1: 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 2: using svg in html

<img src="image.svg" />

Example 3: 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 4: css for svg

/* the following css properties are allowed to use in svg */
alignment-baseline, baseline-shift, clip-path, clip-rule, color,
color-interpolation, color-interpolation-filters, color-rendering,
cursor, direction, display, dominant-baseline, fill-opacity, fill-rule, 
filter, flood-color, flood-opacity, font-family, font-size, 
font-size-adjust, font-stretch, font-style, font-variant, font-weight, 
glyph-orientation-horizontal, glyph-orientation-vertical, 
image-rendering, letter-spacing, lighting-color, marker-end, marker-mid, 
marker-start, mask, opacity, overflow, paint-order, pointer-events, 
shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, 
stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, 
stroke-opacity, stroke-width, text-anchor, text-decoration, 
text-overflow, text-rendering, unicode-bidi, vector-effect, visibility, 
white-space, word-spacing, writing-mode