use svg several instead of canvas
Use one small svg tag for each word, instead of a big canvas where everything happen.
advantages:
- better DOM integration;
- possibility to put glyphus in html, so it's possible use it in titles, lists, etc;
- anti-aliasing;
- possibility to define shapes and reuse them any time it's necessary, so a specific glyph could be drawn only once;
- better customization, since svg style can be defined in css:
- possibility to handle multiple colors an define them in css;
- possibility to define any svg element in css, such as dots, etc.
- set stroke width, etc. via css;
- use hover
- possibility create to use embed-able contents, I think
- javascript is not necessary when shapes are loaded (so it's possible to fill svg using a glyphus api)
- possibility to create funny animation
- use
title
tag at the word level, not global level
example:
<!DOCTYPE html>
<html><body>
<p style="float: left; margin: 0">hello</p>
<svg style="float: left" width="20" height="20"><circle cx="10" cy="10" r="10" stroke-width="4" fill="green" /></svg>
<p style="float: left; margin: 0">hello</p>
<svg style="float: left" width="20" height="20"><circle cx="10" cy="10" r="10" stroke-width="4" fill="green" /></svg>
<p style="margin: 0">hello</p>
</body></html>
more advanced (see codepen):
<html><body>
<svg id="def">
<defs>
<symbol id="icon-home" viewBox="0 0 1024 1024">
<title>home</title>
<path d="M512 96l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 512c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path>
</symbol>
<symbol id="icon-test" viewBox="0 0 1024 1024">
<title>toto</title>
<path d="M512 96l-412 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-412-512zM512 512c-15.346 0-64-28.654-64-64s28.654-64 64-64z"></path>
</symbol>
</defs>
</svg>
<span>Hicse</span>
<svg class="icon"><use xlink:href="#icon-home"></use></svg>
<svg class="icon"><use xlink:href="#icon-test"></use></svg>
<svg class="icon"><use xlink:href="#icon-home"></use></svg>
<span>Hicon-hosssdfgsdfigunsldifugnfgg smse</span>
<svg class="icon"><use xlink:href="#icon-test"></use></svg>
</body></html>
body {
font: 5em sans-serif; color: #444;
}
#def {
display: none;
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
fill: green;
}
Edited by Nathanaël