SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
Beispiel:SVG-Infografik-1.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG - Eine Einführung</title>
<style>
body {
--bgblue: #e6f2f7;
--blue: #306f91;
--yellow: #dfac20;
--bgyellow: #fdfcf3;
--green: #8db243;
--red: #c32e04;
font-size: 2em;
box-sizing: border-box;
}
*, ::before, ::after {
box-sizing: inherit;
}
body {
padding: 0;
margin: 0;
}
section {
width: 100vw;
min-height: 90vh;
padding: 2em;
overflow-x:hidden;
}
section > svg {max-width: 40em;}
#one {
background: var(--bgyellow);
padding: 0 10vw 1em 0;
}
#three {
background: var(--yellow);
}
#five {
background: var(--bgblue);
}
figure img {
max-width: 100%;
}
figcaption {
font-size:.4em;
}
@media (min-width: 30em) {
.threecol {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2em;
max-width: 40em;
}
}
</style>
</head>
<body>
<section id="one">
<svg viewBox="0 0 500 300">
<style>
/* Festlegungen für section #one */
#intro {
animation: changing 15s infinite;
}
@keyframes changing {
15% {
fill:black;
stroke: var(--blue);
stroke-width: 0;
cx: 0px;
cy: 0px;
}
20% {
fill:black;
stroke: var(--blue);
stroke-width: 0;
cx: 75px;
cy: 75px;
}
35% {
fill:black;
stroke: var(--blue);
stroke-width: 0;
cx: 75px;
cy: 75px;
}
40% {
fill: var(--yellow);
stroke: var(--blue);
stroke-width: 0;
cx: 75px;
cy: 75px;
}
55% {
fill: var(--yellow);
stroke: var(--blue);
stroke-width: 0;
cx: 75px;
cy: 75px;
}
60% {
fill: var(--yellow);
stroke: var(--blue);
stroke-width: 5;
cx: 75px;
cy: 75px;
}
95% {
fill: var(--yellow);
stroke: var(--blue);
stroke-width: 5;
cx: 75px;
cy: 75px;
}
100% {
fill: black;
stroke: var(--blue);
stroke-width: 0;
cx: 0px;
cy: 0px;
}
}
#one text,
#three text {
font-family: "Lucida Console", Monaco, monospace;
font-size: 16px;
}
#one #xy{
animation: anipos 15s infinite;
fill: tranparent;
}
#one #fill{
animation: anifill 15s infinite;
fill: tranparent;
}
#one #stroke{
animation: anistroke 15s infinite;
fill: tranparent;
}
@keyframes anipos {
0% {
fill: transparent;
}
15% {
fill: transparent;
}
20% {
fill:black;
}
}
@keyframes anifill {
0% {
fill: transparent;
}
35% {
fill: transparent;
}
40% {
fill:black;
}
}
@keyframes anistroke {
0% {
fill: transparent;
}
55% {
fill: transparent;
}
60% {
fill:black;
}
}
svg {
--bgblue: #e6f2f7;
--blue: #306f91;
--yellow: #dfac20;
--bgyellow: #fdfcf3;
--green: #8db243;
--red: #c32e04;
}
</style>
<circle id="intro" r="50" />
<text x="15" y="155"><circle r="100"
<tspan id="xy" x="90" dy="2em" >cx="150" cy="150"</tspan>
<tspan id="fill" x="90" dy="2em">fill="yellow"</tspan>
<tspan id="stroke" x="90" dy="2em">stroke="blue" stroke-width="5"</tspan>
<tspan>/></tspan>
</text>
</svg>
</section>
<section id="two" tabindex="2">
<h2>2. SVG ist …</h2>
<p class="def">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" alt="SVG-Logo" width="200" style="float:right;">
… eine Auszeichnungssprache für graphische Inhalte, die in HTML integriert und mit <strong>CSS</strong> gestylt und <strong>animiert</strong> werden kann. </p>
<p> Die SVG-Spezifikation ist ein <strong> offener Standard</strong>, der vom <strong>World Wide Web Consortium (W3C)</strong> seit 1999 entwickelt wird.</p>
</section>
<section id="three" tabindex="3">
<h2>3. Grundformen</h2>
<svg viewBox="0 0 500 300">
<defs>
<marker id="markerKreis" markerWidth="8" markerHeight="8" refx="4" refy="4">
<circle cx="4" cy="4" r="2" />
</marker>
<marker id="markerPfeil" markerWidth="130" markerHeight="13" refx="2" refy="6" orient="auto">
<path d="M2,2 v8 l8,-4z "/>
</marker>
</defs>
<style>
#three polygon {
marker-start: url(#markerKreis); marker-mid: url(#markerKreis);
animation: appear 20s infinite;
stroke-dasharray:960, 960;
stroke-dashoffset: 960;
}
#three marker {fill: var(--yellow); stroke: #000; stroke-width: 1;}
#curve1 {
fill: none;
stroke:var(--blue);
stroke-width: 1;
marker-start: url(#markerKreis); marker-end: url(#markerPfeil);
}
@keyframes appear {
0% {
fill: none;
stroke: var(--blue);
stroke-width: 1;
stroke-dasharray:960, 960;
stroke-dashoffset: 960;
}
30% {
fill: none;
stroke: var(--blue);
stroke-width: 1;
stroke-dasharray:960, 960;
stroke-dashoffset: 0;
}
40% {
fill: none;
stroke: var(--blue);
stroke-width: 4;
stroke-dasharray:960, 960;
stroke-dashoffset: 0;
}
50% {
fill: transparent;
stroke: var(--blue);
stroke-width: 1;
stroke-dasharray:960, 960;
stroke-dashoffset: 0;
}
60% {
fill: var(--red);
stroke: var(--red);
stroke-width: 0;
stroke-dasharray:960, 960;
stroke-dashoffset: 0;
}
75% {
fill: var(--red);
stroke: var(--red);
stroke-width: 0;
stroke-dasharray:960, 960;
stroke-dashoffset: 0;
}
90% {
fill: var(--green);
stroke: var(--green);
stroke-width: 0;
stroke-dasharray:960, 960;
stroke-dashoffset: 960;
}
100% {
fill: transparent;
stroke:transparent;
stroke-width: 1;
stroke-dasharray:960, 960;
stroke-dashoffset: 960;
}
}
</style>
<circle cx="75" cy="50" r="45"/>
<text x="75" y="55" fill="white" text-anchor="middle"><circle/></text>
<ellipse rx="60" ry="30" cx="75" cy="130" fill="var(--red)"/>
<text x="75" y="135" fill="white" text-anchor="middle"><ellipse/></text>
<rect x="15" y="165" width="120" height="45" fill="var(--blue)"/>
<text x="75" y="200" fill="white" text-anchor="middle"><rect/></text>
<polygon points="300,10 240,198 390,78 210,78 360,198" />
<text x="305" y="215" fill="white" text-anchor="middle"><polygon/></text>
<path id="curve1" d="M10,240 c250,-90 330,115 380,-60" />
<text x="160" y="235" fill="white" text-anchor="middle"><path/></text>
</svg>
</section>
<section id="four" tabindex="4">
<svg viewBox="0 0 800 260">
<style>
#four [role=heading] {
font-family:serif;
font-size: 100px;
font-weight: bold;
fill: var(--yellow);
stroke: var(--blue);
stroke-width: 2;
}
#four #zwei {
fill: url(#karo);
stroke: var(--red);
stroke-width: 1px;
font-family: sans-serif;
font-size: 160px;
}
line,
#curve2 {
fill: none;
stroke: var(--red);
stroke-width: 1;
}
#gebogen1,
#gebogen2 {
font-family: arial;
font-size: 24px;
}
</style>
<pattern id="karo" x="10" y="10" width="30" height="30" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="10" height="10" fill="var(--yellow)" />
<rect x="10" y="0" width="10" height="10" fill="var(--blue)" />
<rect x="20" y="0" width="10" height="10" fill="var(--red)" />
<rect x="0" y="10" width="10" height="10" fill="var(--red)" />
<rect x="10" y="10" width="10" height="10" fill="var(--green)" />
<rect x="20" y="10" width="10" height="10" fill="var(--yellow)" />
<rect x="0" y="20" width="10" height="10" fill="var(--blue)" />
<rect x="10" y="20" width="10" height="10" fill="var(--red)" />
<rect x="20" y="20" width="10" height="10" fill="var(--green)" />
</pattern>
<line x1="10" y1="100" x2="400" y2="100"/>
<text role="heading" x="10" y="100">TEXT in</text>
<text role="heading" id="zwei" x="430 550 650" y="120 170 220">
SVG
</text>
<circle cx="150" cy="200" r="50" fill="var(--yellow)" />
<path id="curve2" d="M10,240 c200,-150 330,150 380,-60" />
<text id="gebogen1" fill="var(--blue)" >
<textPath xlink:href="#curve2">
Text entlang einer Bézierkurve.
</textPath>
</text>
<text id="gebogen2" fill="var(--red)" transform="translate(0,-20)">
<textPath xlink:href="#curve2" startOffset="10">
<animate attributeName="startOffset" dur="7s" from="-370" to="20"
repeatCount="indefinite" />
Lauftext entlang einer Bézierkurve! Lauftext entlang einer Bézierkurve!
</textPath>
</text>
</svg>
<p>ist …
<ul>
<li>mit der Maus auswählbar</li>
<li>von Suchmaschinen indizierbar</li>
<li>immer gestochen scharf</li>
<li>beliebig skalierbar</li>
<li>mit CSS, SMIL und JavaScript animierbar</li>
</ul>
</section>
<section id="five" tabindex="5">
<h2>5. Die viewBox</h2>
<p>Vektorgrafiken werden in einem Koordinatensystem gezeichnet und lassen sich verlustfrei skalieren!</p>
<svg width="900" height="400" viewbox="0 0 800 400">
<defs>
<style>
text {
font-family:verdana;
font-size: 12px;
}
.axis {
stroke: #999;
marker-end: url(#markerArrow);
}
</style>
<pattern id="grid" patternUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
<path d="M0,0 v10 h10" stroke="var(--blue)" fill="none" />
</pattern>
<marker id="markerArrow" markerWidth="130" markerHeight="13" refx="2" refy="6" orient="auto">
<path d="M0,2 l8,4 l-8,4" fill="none" stroke="#999" stroke-width="1"/>
</marker>
<linearGradient id="linear-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="20%" style="stop-color:var(--yellow);" />
<stop offset="80%" style="stop-color:var(--blue)" />
</linearGradient>
</defs>
<rect x="0" y="0" width="800" height="400" fill="url(#grid)"></rect>
<g stroke="#000" fill="#FFF" transform="translate(90,90)">
<rect x="0" y="0" width="100" height="100" fill="url(#linear-gradient)"/>
<path d="M0,0 l100,100 m-100,0 l100,-100"/>
</g>
<g>
<path class="axis" d="M200,400 v-395"/>
<path class="axis" d="M0,200 h695"/>
<circle cx="200" cy="200" r="4" fill="var(--red)"></circle>
<text x="210" y="220" fill="darkslategray">(200,200)</text>
</g>
<animate
attributeName="viewBox"
begin="1s"
dur="10s"
values=" 0 0 800 400;
130 130 330 230;
0 0 800 400;
-300 -300 1300 500;
0 0 800 400"
fill="freeze"
repeatCount="indefinite"/>
</svg>
</section>
<section id="six" tabindex="6">
<h2>6. Wozu kann man SVG nutzen?</h2>
<div class="threecol">
<div>
<h3>Logos</h3>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" alt="SVG-Logo" width="150" height="150">
</figure>
<figure>
<img src="https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg" alt="Selfhtml" width="150" height="150">
<figcaption></figcaption>
</figure>
</div>
<div>
<h3>Icons</h3>
<figure>
<svg id="scissors" width="100" viewBox="0 0 26 26" preserveAspectRatio="xMinYMin meet">
<path class="white" d="M24.8,14.7c-1.5,1.5-4,1.5-5.5,0c-0.8-0.8-1.2-1.9-1.1-3l-2.7,0.8l-2.9,10.9C12,25,10.6,25.7,8.9,26l3.7-12.7L0,17.1c0.3-1.7,1-3.1,2.5-3.7l10.9-2.9l0.8-2.7c-1,0-2.1-0.4-2.9-1.2c-1.5-1.5-1.5-4,0-5.6c1.5-1.5,4-1.5,5.5,0c1.5,1.5,1.5,4,0.1,5.5l-0.8,3.2L19.5,9c1.5-1.4,3.9-1.3,5.4,0.2C26.4,10.7,26.4,13.1,24.8,14.7z M20.4,10.2c-0.9,0.9-0.9,2.5,0,3.4c0.9,0.9,2.5,0.9,3.4,0c0.9-1,0.9-2.5,0-3.4C22.8,9.3,21.3,9.3,20.4,10.2z M12.4,2.2c-0.9,0.9-0.9,2.5,0,3.4c0.9,0.9,2.5,0.9,3.4,0c0.9-1,0.9-2.5,0-3.4C14.9,1.3,13.4,1.3,12.4,2.2z"></path>
</svg>
</figure>
<figure>
<svg id="bla" width="100" viewBox="0 0 42.3 45" preserveAspectRatio="xMinYMin meet">
<g>
<g>
<g>
<path class="white" d="M19.2,26.9c0.8,0.5,1.7,1.1,2.4,1.8c0.8,0.8,1.3,1.6,1.8,2.4c0,0,17.7-17.5,18.9-18.7
c-1.2-3.1-4.2-4.3-4.2-4.3L19.2,26.9z"></path>
<path class="white" d="M18.9,33c0.3,0.3,0.2,0.7-0.2,0.8l-1.9,0.5c-0.4,0.1-0.7-0.1-0.6-0.6l0.5-1.9c0.1-0.4,0.5-0.5,0.8-0.2L18.9,33z"></path>
</g>
<polygon class="white" points="19.4,22.8 7.4,22.8 7.4,24.1 18,24.1"></polygon>
<polygon class="white" points="23.1,19.1 7.4,19.1 7.4,20.5 21.6,20.5"></polygon>
<polygon class="white" points="26.6,15.6 26.6,15.4 7.4,15.4 7.4,16.8 25.3,16.8"></polygon>
</g>
<path class="white" d="M30,28.7v13.1H3.2V11.9h5.3c1.9,0,3.5-1.6,3.5-3.5V3.2h18v9.1l3.2-3.2v-7C33.2,1,32.2,0,31,0H11L0,10.9v1l0,0
h0v31C0,44,1,45,2.2,45H31c1.2,0,2.1-1,2.1-2.1V25.5L30,28.7z"></path>
</g>
</svg>
</figure>
<figure>
<svg id="documents" width="100" viewBox="0 0 64.6 56" preserveAspectRatio="xMinYMin meet">
<path class="white" d="M27.7,45.5l25-8.4l12,6.9l-37,12L0,40l11.8-3.8L27.7,45.5z M0,12L37,0l27.6,16l-37,12L0,12z M0,26l11.8-3.8l15.9,9.3l25-8.4l12,6.9l-37,12L0,26z"></path>
</svg>
</figure>
</div>
<div>
<h3>Datenvisualisierung</h3>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b2/20181204_Warming_stripes_%28global%2C_WMO%2C_1850-2018%29_-_Climate_Lab_Book_%28Ed_Hawkins%29.svg" alt="Infografik Klimatabelle" width="300" height="150">
<figcaption>durchschnittliche globale Temperaturen (1850-2018)<br>Quelle: <a href="https://commons.wikimedia.org/wiki/File:20181204_Warming_stripes_(global,_WMO,_1850-2018)_-_Climate_Lab_Book_(Ed_Hawkins).svg">Wikimedia Commons</a> </figcaption>
</figure>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/Circulatory_system_SMIL.svg" alt="Infografik Blutzirkulation">
<figcaption>Blutzirkulation<br>Quelle: <a href="https://commons.wikimedia.org/wiki/File:Circulatory_system_SMIL.svg">Wikimedia Commons</a> </figcaption>
</figure>
</div>
</div>
</section>
<section id="seven" tabindex="7">
<h2>7. Wie kann man SVGs erzeugen?</h2>
<p>Nutzen Sie diese Programme:</p>
<div class="threecol">
<div>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Adobe_Illustrator_icon_CS6.svg" alt="Adobe Illustrator">
<figcaption>Adobe Illustrator</figcaption>
</figure>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f1/CorelDraw_logo.svg" alt="corelDraw" width="300" height="150">
</figure>
</div>
<div>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/The_GIMP_icon_-_gnome.svg" alt="Gimp" width="300" height="300">
<figcaption>The GIMP</figcaption>
</figure>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c6/Inkscape-small.svg" alt="Inkscape">
<figcaption>Inkscape</figcaption>
</figure>
</div>
<div>
<figure>
<img src="https://boxy-svg.com/images/logos/logo-full.svg" alt="Boxy SVG">
<figcaption>Boxy SVG</figcaption>
</figure>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Sketch_Logo.svg" alt="sketch">
<figcaption>Sketch</figcaption>
</figure>
</div>
</div>
</section>
</body></html>
