Sprites, Canvas, SVG

Ein Beispiel mit einem Sprite und CSS Flexbox

in der oberen Zeile ist das Bild vollständig dargestellt. In der untern Zeile wird die Sprite-TEchnik verwendet. In jedem Rechteck wird jeweils ein Teil des Bildes dargestellt. Die Rechtecke sind mit CSS Flex positioniert. Macht man das Browserfenster schmäler, dann wandern REchtecke, für die der Platz in einer Zeile nicht ausreicht, in die nächste Zeile.

Ein Beispiel mit CSS Canvas

Zwei Beispiele mit SVG (Scalable Vector Graphics)

1. Ein Screenshot des Canvas-Beipieles in SVG umgewandelt.
2. Ein Beispiel mit in das HTML eingebettetem, selbst erstelltem SVG-Code.