Specified on a <svg>
or <canvas>
element to declare that an identicon should be rendered for this value within the element.
<svg|canvas width="200" height="200" data-jdenticon-value="<icon value>">
Availability | Browser | Node.js |
---|---|---|
data-jdenticon-value | Yes | No |
This HTML attribute can be added to any <svg>
or <canvas>
element. Once the page is loaded, an identicon for the specified value will be rendered in the attributed element. The value will be UTF8 encoded and hashed using SHA1.
If both data-jdenticon-value
and data-jdenticon-hash
is specified on an element, data-jdenticon-hash
has precedence.
Canvas icons are bitmaps which are scaled on high DPI screens causing a blurry look, while SVG icons are rendered at the native screen resolution always resulting in crisp icons. The performance of SVG rendering varies among browsers and is generally slower than canvas rendering, but in most applications the difference in performance is negligible.
The code below will render two identicons, one canvas based and one svg based. user127
is just an example of a value.
<svg width="200" height="200" data-jdenticon-value="user127"> Fallback text for browsers not supporting inline svg </svg> <canvas width="200" height="200" data-jdenticon-value="user127"> Fallback text for browsers not supporting canvas </canvas> <script src="https://cdn.jsdelivr.net/npm/jdenticon@3.2.0/dist/jdenticon.min.js" async integrity="sha384-yBhgDqxM50qJV5JPdayci8wCfooqvhFYbIKhv0hTtLvfeeyJMJCscRfFNKIxt43M" crossorigin="anonymous"> </script>