data-jdenticon-value

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

<canvas|svg width="200" height="200" data-jdenticon-value="<icon value>">
Compability
Browser: Yes Node.js: No

Remarks

This HTML attribute can be added to any <canvas> or <svg> 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.

<canvas width="200" height="200" data-jdenticon-value="user127">
    Fallback text for browsers not supporting canvas
</canvas>

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

<script src="https://cdn.jsdelivr.net/npm/jdenticon@2.1.0" async></script>

See also

data-jdenticon-hash