Ein Ausdruck von der Webseite www.mobger.de.
---------------------------------------------------------------
Bei der Frage, wie man Icons – zum Beispiel Emoticons – in seine Webseite integriert, gibt es verschiedene Lösungsideen:
Alle Vorgehensweisen haben Vor- und Nachteile. Ein Font funktioniert immer, macht aber Schwierigkeiten bei farbigen Icons. Die SVG-Sprites implizieren Cross-Browser-Probleme. Das Inline-SVG bläht den HTML-Code unnötig auf, ermöglicht aber die 'indivduelle' Animation per JavaScript und CSS.
Anmerkung: Schade, dass bei der Definition von HTML5 das Einladen von Sprite-Resourcen zum Beispiel für Graphiken, Bilder oder HTML-Templates nicht vorgesehen wurde.
Ich bin noch unschlüssig, in welchen Anwendungsfällen welches Vorgehen am sinnvollsten ist. Bei den Emoticons ergab sich aber auch ein Unterrproblem. Wie baut man am einfachsten schell und effizient verschiedene Varianten von Emoticons.
Am einfachsten wäre eine Emoticons-Generator. Schließlich unterscheidet sich das einfache Smilie vom Zwincker-Smilie nur durch ein zugekniffene Auge. Es macht also Sinn, die Augen unabhängig vom Rest des Gesichtes zu definieren. Gleiches gilt für Nase, Wangen, Mund, ....
Technisch lässt sich die Modularisierung des Gesichts mit SVG im SVG lösen. Dies hat den Vorteil, dass jedes inkludiertes SVG sein eigene Koordinatensystem besitzt und individuell definiert werden kann. Statt großer Erklärungen präsntiere ich hier nur meinen Dummy-Entwurf für einen Emoticon-Generator. In dem Beispiel wird die SVG im SVG-Technik genutzt.
Interessierte speichern den Code als .svg-Datei ab und rufen die Datei mit ihrem Browser auf. Mit einem Editor kann man Änderungen vornehmen.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<!-- font-size-base 7.5 -->
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
width="600"
height="553.85"
viewBox="0 0 130 120"
id="molekul-scheme"
version="2.0"
style="margin-left: 20px; margin-top: 20px; border: 2px #c0c0c0 solid; background: #ffffff;"
>
<!--<script>-->
<!--alert('hallo, ich bin aus der Datei');-->
<!--</script>-->
<style>
.face-color-envious {
fill: lightgreen;
}
.face-color-normal {
fill: gold;
}
.face-color-blushed {
fill: darkred;
}
.face-color-deadly {
fill: silver;
}
.face-color-deadly {
fill: silver;
}
.eye-outer {
fill: #fff;
stroke: #4aa;
stroke-width: 0.05;
}
.eye-inner {
fill: #4aa;
}
.eye-eyelash {
stroke: #4aa;
stroke-width: 0.5;
}
.nose, .eyebrows {
stroke : #4aa;
fill: #4aa;
}
.logo {
}
.rotate-left {
transform: rotate(10deg);
}
.rotate-right {
transform: rotate(-10deg);
}
</style>
<defs>
<svg id="iconEyeSimple"
viewBox="-20 -20 40 40"
>
<ellipse cx="0" cy="0"
rx="6" ry="10"
class="eye-outer"
/>
<ellipse cx="0" cy="6"
rx="3" ry="4"
class="eye-inner"
/>
</svg>
<svg id="iconAddShySheekLeft"
viewBox="-10 -10 20 20"
>
<radialGradient id="shySheekLeft"
cx="0.5" cy="0.4" r="0.8" fx="0.35" fy="0.15"
>
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="transparent" />
</radialGradient>
<circle cx="0" cy="0"
r="9"
fill="url(#shySheekLeft)"
/>
</svg>
<svg id="iconAddShySheekRight"
viewBox="-10 -10 20 20"
>
<radialGradient id="shySheekRight"
cx="0.5" cy="0.4" r="0.8" fx="0.65" fy="0.15"
>
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="transparent" />
</radialGradient>
<circle cx="0" cy="0"
r="9"
fill="url(#shySheekRight)"
/>
</svg>
<svg id="iconNoseNormalHard"
viewBox="-10 -25 20 50"
>
<path d="M 0 -20
L 0 -20
L -3 15
L 0 20
L 3 15
L 0 -20
Z" />
</svg>
<svg id="iconNoseNormalSoft"
viewBox="-10 -25 20 50"
>
<path d="M 0 -20
S 0 -10, 0 -20
C 0 -10, -5 5, -5 10
C -5 15, -5 20, 0 20
C 5 20, 5 15, 5 10
C 5 5, 0 -10, 0 -20
Z" />
<!--<path d="M 0 -20-->
<!--S 0 -10, 0 -20-->
<!--C 0 -10, -5 10, -5 15-->
<!--C -5 20, -5 20, 0 20-->
<!--C 5 20, 5 20, 5 15-->
<!--C 5 10, 0 -10, 0 -20-->
<!--Z" />-->
</svg>
<svg id="iconAddEyeLash"
viewBox="-20 -20 40 40"
>
<line x1="0" y1="2"
x2="-7" y2="-6.5"
class="eye-eyelash"
/>
<line x1="0" y1="2"
x2="7" y2="-6.5"
class="eye-eyelash"
/>
<line x1="0" y1="2"
x2="-6" y2="-9.5"
class="eye-eyelash"
/>
<line x1="0" y1="2"
x2="6" y2="-9.5"
class="eye-eyelash"
/>
<line x1="0" y1="2"
x2="-4" y2="-12"
class="eye-eyelash"
/>
<line x1="0" y1="2"
x2="4" y2="-12"
class="eye-eyelash"
/>
<line x1="0" y1="2"
x2="-1.55" y2="-13.5"
class="eye-eyelash"
/>
<line x1="0" y1="2"
x2="1.55" y2="-13.5"
class="eye-eyelash"
/>
</svg>
<svg id="iconEyeBrowsNormalLeft"
viewBox="-20 0 40 20"
>
<rect x="-15" y="0"
width="30" height="5"
rx="10" ry="2"
class="eyebrows rotate-left"
/>
</svg>
<svg id="iconEyeBrowsNormalRight"
viewBox="-20 0 40 20"
>
<rect x="-15" y="0"
width="30" height="5"
rx="10" ry="2"
class="eyebrows rotate-right"
/>
</svg>
<svg id="iconEyeBrowsNormalFlat"
viewBox="-20 0 40 20"
>
<rect x="-15" y="0"
width="30" height="5"
rx="10" ry="2"
class="eyebrows"
/>
</svg>
<g id="groupEyeBrowsNormal">
<use x="25" y="22"
width="30" height="20"
class="logo"
xlink:href="#iconEyeBrowsNormalFlat"
/>
<use x="65" y="22"
width="30" height="20"
class="logo"
xlink:href="#iconEyeBrowsNormalFlat"
/>
</g>
<g id="groupEyeBrowsSerious">
<use x="25" y="22"
width="30" height="20"
class="logo"
xlink:href="#iconEyeBrowsNormalLeft"
/>
<use x="65" y="22"
width="30" height="20"
class="logo"
xlink:href="#iconEyeBrowsNormalRight"
/>
</g>
<g id="groupEyeBrowsFriendly">
<use x="25" y="22"
width="30" height="20"
class="logo"
xlink:href="#iconEyeBrowsNormalRight"
/>
<use x="65" y="22"
width="30" height="20"
class="logo"
xlink:href="#iconEyeBrowsNormalLeft"
/>
</g>
<g id="groupEyeBrowsWicked">
<use x="25" y="22"
width="30" height="20"
class="logo"
xlink:href="#iconEyeBrowsNormalRight"
/>
<use x="65" y="22"
width="30" height="20"
class="logo"
xlink:href="#iconEyeBrowsNormalFlat"
/>
</g>
<g id="groupEyeBrowsRemarked">
<use x="25" y="22"
width="30" height="20"
class="logo"
xlink:href="#iconEyeBrowsNormalRight"
/>
<use x="65" y="22"
width="30" height="20"
class="logo"
xlink:href="#iconEyeBrowsNormalFlat"
/>
</g>
<svg id="iconLogo"
width="100%"
height="100%"
font-size="15px"
viewBox="-10 -10 20 20"
overflow="hidden"
preserveAspectRatio="none"
>
<style>
.smiley {
transform: rotate(70deg);
}
</style>
<radialGradient id="smilyface"
cx="0.5" cy="0.4" r="0.8" fx="0.35" fy="0.15"
>
<stop offset="0%" stop-color="transparent"/>
<stop offset="100%" stop-color="#fff;" />
</radialGradient>
<circle cx="0" cy="0"
r="9"
fill="url(#smilyface)"
/>
<circle cx="0" cy="0"
r="9"
style="opacity:0.8"
/>
</svg>
<g id="groupShySheeks">
<use x="22" y="65"
width="20" height="20"
class="logo"
xlink:href="#iconAddShySheekLeft"
/>
<use x="78" y="65"
width="20" height="20"
class="logo"
xlink:href="#iconAddShySheekRight"
/>
</g>
<svg id="iconMouthWideSmile"
viewBox="-50 -20 100 40"
>
<path d="M 0 0
C -10 0, -30 -5, -45 -10
C -30 0, -20 10, 0 10
C 20 10, 30 0, 45 -10
C 30 -5, 10 0, 0 0
Z" />
</svg>
<svg id="iconMouthSmile"
viewBox="-50 -20 100 40"
>
<path d="M 0 0
C -10 0, -30 -5, -35 -10
C -30 0, -20 10, 0 10
C 20 10, 30 0, 35 -10
C 30 -5, 10 0, 0 0
Z" />
</svg>
<svg id="iconMouthSad"
viewBox="-50 -20 100 40"
>
<path d="M 0 -5
C -10 -5, -30 -5, -35 0
C -30 -7, -20 -10, 0 -10
C 20 -10, 30 -7, 35 0
C 30 -5, 10 -5, 0 -5
Z" />
</svg>
</defs>
<!--Gesicht-->
<!--<use x="0" y="0"-->
<!--width="120" height="120"-->
<!--class="logo face-color-envious"-->
<!--xlink:href="#iconLogo"-->
<!--/>-->
<!--<use x="0" y="0"-->
<!--width="120" height="120"-->
<!--class="logo face-color-deadly"-->
<!--xlink:href="#iconLogo"-->
<!--/>-->
<!--<use x="0" y="0"-->
<!--width="120" height="120"-->
<!--class="logo face-color-blushed"-->
<!--xlink:href="#iconLogo"-->
<!--/>-->
<use x="0" y="0"
width="120" height="120"
class="logo face-color-normal"
xlink:href="#iconLogo"
/>
<!--Augenbrauen-->
<!--<use xlink:href="#groupEyeBrowsWicked" />-->
<!--<use xlink:href="#groupEyeBrowsRemarked" />-->
<use xlink:href="#groupEyeBrowsNormal" />
<!--<use xlink:href="#groupEyeBrowsSerious" />-->
<!--<use xlink:href="#groupEyeBrowsFriendly" />-->
<!--Augen mit AddLiedern-->
<!--<use x="15" y="25"-->
<!--width="50" height="50"-->
<!--class="logo"-->
<!--xlink:href="#iconAddEyeLash"-->
<!--/>-->
<use x="15" y="25"
width="50" height="50"
class="logo"
xlink:href="#iconEyeSimple"
/>
<!--<use x="55" y="25"-->
<!--width="50" height="50"-->
<!--class="logo"-->
<!--xlink:href="#iconAddEyeLash"-->
<!--/>-->
<use x="55" y="25"
width="50" height="50"
class="logo"
xlink:href="#iconEyeSimple"
/>
<!--Nase-->
<use x="50" y="35"
width="20" height="50"
class="logo nose"
xlink:href="#iconNoseNormalSoft"
/>
<!--Schüchterne Wnagen-->
<!--<use xlink:href="#groupShySheeks" />-->
<!--Mund-->
<use x="10" y="75"
width="100" height="40"
class="logo nose"
xlink:href="#iconMouthSmile"
/>
<!--<use x="10" y="75"-->
<!--width="100" height="40"-->
<!--class="logo nose"-->
<!--xlink:href="#iconMouthWideSmile"-->
<!--/>-->
<!--<use x="10" y="75"-->
<!--width="100" height="40"-->
<!--class="logo nose"-->
<!--xlink:href="#iconMouthSad"-->
<!--/>-->
</svg>
---------------------------------------------------------------
Ein Ausdruck von der Webseite www.mobger.de.