Ein Ausdruck von der Webseite www.mobger.de.
---------------------------------------------------------------
When it comes to the question of how to integrate icons - for example, emoticons - into his website, there are various solution ideas:
All procedures have advantages and disadvantages. A font always works, but makes it difficult with colored icons. The SVG sprites imply cross-browser issues. The inline SVG inflates the HTML code unnecessarily, but allows the 'indivduelle' animation via JavaScript and CSS.
Note: It's a pity that the HTML5 definition did not allow loading of Sprite resources for graphics, images, or HTML templates, for example.
I am still undecided in which use cases which approach makes the most sense. In the case of the emoticons, however, there was also a subr problem. The easiest way to build different versions of emoticons quickly and efficiently.
The easiest way would be an emoticons generator. After all, the simple smily from wicked-smily differs only by a squinted eye. So it makes sense to define the eyes independently of the rest of the face. The same applies to nose, cheeks, mouth, ....
Technically, the modularization of the face can be solved with SVG in SVG. This has the advantage that each included SVG has its own coordinate system and can be individually defined. Instead of big explanations I present here only my dummy design for an emoticon generator. In the example the SVG is used in the SVG technique.
Interested parties save the code as a .svg file and call the file with their browser. With an editor you can make changes.
(translation helped by google)
<?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.
