data-jdenticon-value

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>">
AvailabilityBrowserNode.js
data-jdenticon-valueYesNo

Remarks

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.

Example

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.1.0/dist/jdenticon.min.js" async
        integrity="sha384-VngWWnG9GS4jDgsGEUNaoRQtfBGiIKZTiXwm9KpgAeaRn6Y/1tAFiyXqSzqC8Ga/"
        crossorigin="anonymous">
</script>

See also

data-jdenticon-hash