Beispiel:SVG-Barrierefrei-3.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nikolausgruß</title> <style>
text {
font-family: 'Nunito Rounded', sans-serif; font-weight: 700; fill:#c60b0b;
stroke: black; stroke-width: 1; text-anchor: middle; font-size: 48px; } body{
max-width: 50em;
margin: 1em auto; } </style> </head>
<body>
Nikolausgrüße zum 06. Dezember
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 900 450" role="img" aria-labelledby="my-title"> <title id="my-title">Nikolasgruß</title> <desc id="my-desc">Schneemann mit rotem Schal und Mütze im Advents-Look</desc>
<defs>
<radialGradient
id="snowball"
cx="0.25"
cy="0.25"
r="1"
>
<stop
offset="0%"
stop-color="white"
/>
<stop
offset="50%"
stop-color="white"
/>
<stop
offset="100%"
stop-color="#d6d6d6"
/>
</radialGradient>
</defs>
<rect width="100%" height="100%" style="fill:white;stroke:#132c39; stroke-width:1" /> <rect width="100%" height="300" style="fill:lightblue;stroke:#132c39; stroke-width:0" /> <g id="snowman" transform="translate(400,160)">
<circle cx="-2" cy="60" r="75" fill="url(#snowball)" /> <circle cx="0" cy="-40" r="60" fill="url(#snowball)" />
<path id="nose" d="m10,-26 c-15,5 -14,-25 10,-10 l20,12 z" style="fill:orange;stroke:black;stroke-width:2" />
<ellipse cx="-10" cy="-55" rx="6" ry="9" /> <ellipse cx="20" cy="-55" rx="6" ry="9" /> <ellipse cx="-7" cy="-52" rx="3" ry="3" fill="white"/> <ellipse cx="20" cy="-52" rx="3" ry="3" fill="white"/>
<path id="stick" d="m50,40 l70,-50 m-25,20 h25" style="fill:none;stroke:maroon;stroke-width:5;stroke-linecap:round;" /> </g> <g id="hat" transform="translate(300,20)"> <path id="wool" style="fill:#c60b0b;color:oklch(50% 0.2 29); stroke:black;stroke-width:2" d="m7,90 c-12,-78 65,-99 95,-72 l-75,55 c-5,-16 -9,-9 -6,15 z"/>
<path id="fur" style="fill:white;stroke:black;stroke-width:2" d="m102,18 c22,8 27,18 0,35 c-22,15 -44,35 -60,43 c-15,10 -14,-25 -15,-23 c5,15 -14,-25 76,-55"/>
<circle id="pompom" cx="16" cy="100" r="13" style="fill:white;stroke:black;stroke-width:2" /> </g> <g id="scarf" style="fill:#c60b0b;stroke:black;stroke-width:1;" transform="translate(62,-312)"> <path d="M 289,468 C 295,477 297,478 304,482 C 309,484 314,486 321,488 C 333,490 354,489 365,484 C 372,482 374,479 378,476 C 390,477 391,492 377,498 C 372,502 363,508 347,511 C 338,513 326,513 319,511 C 301,508 293,502 290,496 C 287,491 286,486 284,480 C 284,476 285,472 289,468 z " />
<path d="M 297,507 C 296,507 296,511 295,513 C 293,518 292,528 292,536 C 291,549 292,557 294,562 C 296,570 297,584 301,585 C 301,585 301,585 302,585 C 302,584 301,583 301,581 C 299,576 297,571 297,567 C 297,567 298,566 298,566 C 298,566 298,566 299,566 C 299,566 300,566 300,567 C 300,566 300,567 300,567 C 300,570 302,575 304,580 C 304,582 305,584 306,585 C 306,585 307,585 308,585 C 307,583 306,581 306,579 C 304,574 302,569 302,565 C 302,565 303,564 303,564 C 303,564 304,564 305,564 C 305,564 305,565 305,565 C 305,568 307,573 308,578 C 309,580 310,582 310,583 C 311,583 312,582 312,580 C 312,580 312,580 312,580 C 311,579 311,578 311,577 C 309,573 307,567 307,564 C 307,563 308,562 309,562 C 309,562 310,563 310,563 C 310,563 310,564 310,564 C 310,566 312,572 314,577 C 314,578 314,577 314,578 C 317,575 314,569 314,565 C 313,561 312,559 312,553 C 311,543 313,528 315,518 C 316,517 317,514 316,514 C 315,513 312,513 308,511 C 304,510 299,508 297,507 z"/>
</g>
<text x="300" y="370">SELFHTML wünscht </text> <text x="600" y="430">einen schönen Advent!</text> </svg>
Bilder benötigen einen Alternativtext - in SVG geben <title>, <desc> und das <text>-Element Informationen über das Bild!
Zum Tutorial: <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/barrierefreie_SVGs">SVG/Tutorials/Einstieg/barrierefreie SVGs</a>.
<a href="https://forum.selfhtml.org/advent/2024">Zurück zum
Adventskalender 2024.
</body> </html>
