Skip to content

Instantly share code, notes, and snippets.

@aaizemberg

aaizemberg/index.html

Created July 12, 2016 17:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aaizemberg/093e1c55171807bb67ac12bf3b87b888 to your computer and use it in GitHub Desktop.
Save aaizemberg/093e1c55171807bb67ac12bf3b87b888 to your computer and use it in GitHub Desktop.
Download ZIP
svg icons using symbol
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>iconos svg usando symbol</title>
<style>
.icon {
width: 100px;
height: 100px;
background: #ccc;
}
body {
padding: 20px;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="beaker" viewBox="214.7 0 182.6 792">
<circle cx="344.8" cy="20.2" r="20.2"/>
<circle cx="344.8" cy="92.9" r="20.2"/>
<circle cx="320.5" cy="169.7" r="24.2"/>
<circle cx="243" cy="141.4" r="24.2"/>
<circle cx="284.2" cy="56.6" r="36.4"/>
<path d="M397.3 768.5l-11.3-343.5v-178.5l9.7-20.2h-29.9l-4 13.7 2.4 189.9 9.7 316.8c1.6 14.5-19.4 12.9-34.8 12.9h-33.9s-38.8.8-46.1 0c-14.5-.8-18.6 1.6-17-29.1 1.6-25.2.8-95.5 5.7-301.5l-2.4-189.9-3.2-12.9h-27.5l9.7 20.2v178.6s-3.2 323.3-3.2 343.5c0 26.7 22.6 23.4 22.6 23.4h128.5c7.2 0 25 0 25-23.4zM259.9 473.5h93.8l-1.6-79.9h-92.2zM356.1 611.7l-2.4-132.6v5.7h-93.8l-.8 126.9zM352.1 382.3l-1.7-99.4h-89.7l-.8 99.4zM259.1 623l-.8 123.6h101l-2.4-123.6z"/>
</symbol>
<symbol id="fish" viewBox="0 26 100 48">
<path d="M98.5,47.5C96.5,45.5,81,35,62,35c-2.1,0-4.2,0.1-6.2,0.3L39,26c0,4.5,1.3,9,2.4,12.1C31.7,40.7,23.3,44,16,44L0,34
c0,8,4,16,4,16s-4,8-4,16l16-10c7.3,0,15.7,3.3,25.4,5.9C40.3,65,39,69.5,39,74l16.8-9.3c2,0.2,4.1,0.3,6.2,0.3
c19,0,34.5-10.5,36.5-12.5S100.5,49.5,98.5,47.5z M85.5,50c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5
C88,48.9,86.9,50,85.5,50z"/>
</symbol>
</svg>
<svg class="icon"><use xlink:href="#beaker" /></svg>
<svg class="icon"><use xlink:href="#fish" /></svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment