Skip to content

Instantly share code, notes, and snippets.

Last active February 21, 2021 17:53
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save k0emt/81399d59c2c056f376a2 to your computer and use it in GitHub Desktop.
Inline SVG, styled with CSS
<!DOCTYPE html>
<link href='' rel='stylesheet' type='text/css'>
<script src=""></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
.label {
font-size: 2em;
fill: indigo;
.huge {
font-size: 20em;
fill: red;
stroke: black;
stroke-width: 10px;
.cool {
font-family: 'Open Sans Condensed', sans-serif;
<title>SVG Experimenting</title>
<svg width="500" height="500">
<rect width="50" height="50" x="50" y="50" fill="red"/>
<rect width="50" height="50" x="150" y="50" fill="blue"/>
<rect width="50" height="50" x="50" y="150" fill="none" stroke="green" stroke-width="5"/>
<rect width="50" height="50" x="150" y="150" fill="rgb(100,50,200)" stroke="red" stroke-width="3"/>
<circle r="30" cx="125" cy="125" stroke="hotpink" stroke-width="3"/>
<g transform="translate(50,20)">
<line x1="25" y1="205" x2="200" y2="300" stroke="black" stroke-width="20" />
<line x1="200" y1="300" x2="50" y2="275" stroke="blue" stroke-width="20" />
<!-- Z at the end of path directive means close the path -->
<path d="M250 250 L300 350 L250 350Z" stroke="green" stroke-width="2" />
<path d="M250 375 L325 350 L400 400 L450 375" stroke="magenta" stroke-width="2" fill="none"/>
<text class="label" x="150" y="450">Hello SVG text!</text>
<text class="huge" x="250" y="250">C</text>
<text class="cool" x="125" y="475">Zebras are quite fast. Fox jumped over the yellow dog!</text>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment