Skip to content

Instantly share code, notes, and snippets.

@k0emt

k0emt/inline-svg.html

Last active February 21, 2021 17:53
Show Gist options
  • Save k0emt/81399d59c2c056f376a2 to your computer and use it in GitHub Desktop.
Save k0emt/81399d59c2c056f376a2 to your computer and use it in GitHub Desktop.
Download ZIP
Inline SVG, styled with CSS
Raw
inline-svg.html
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
.label {
font-size: 2em;
font-family:"sans-serif";
fill: indigo;
}
.huge {
font-size: 20em;
fill: red;
stroke: black;
stroke-width: 10px;
}
.cool {
font-family: 'Open Sans Condensed', sans-serif;
}
</style>
<title>SVG Experimenting</title>
</head>
<body>
<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"/>
</g>
<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>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment