data-jdenticon-hash

Specified on a <svg> or <canvas> element to declare that an identicon should be rendered for this hexadecimal hash string within the element.

<svg|canvas width="200" height="200" data-jdenticon-hash="<icon hash>">

Remarks

This HTML attribute can be added to any <svg> or <canvas> element. Once the page is loaded, an identicon for the specified hash will be rendered in the attributed element. The hash must be a hexadecimal hash string of at least 11 characters.

This attribute is handy if you have an already hashed value stored in your database or if you for some reason want to use another hash algorithm than SHA1 for generating the hash. If you don't, consider using data-jdenticon-value instead.

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.

Example

The code below will render two identicons, one canvas based and one svg based.

<svg width="200" height="200" data-jdenticon-hash="ff8adece0631821959f443c9d956fc39">
    Fallback text for browsers not supporting inline svg
</svg>

<canvas width="200" height="200" data-jdenticon-hash="ff8adece0631821959f443c9d956fc39">
    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>

See also

data-jdenticon-value