Beispiel:SVG-Icons-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> 

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="./Beispiel:Grundlayout.css">
 <title>SVG-Icons - 2</title>

<style> svg, svg * { 

 pointer-events: all;

}

.background { 

 fill: none;

}

a:hover .background, a:focus .background { 

 fill: #fffbf0;
 stroke: #e7c157;
 stroke-width:1;

}

.normal { 

 fill: #ccc;
 stroke: black;
 stroke-width: 0.5;

}

.iconfill2 { 

 fill: #09c;
 stroke: #09c;
 stroke-width: 0.5;

}

.iconfill3 { 

 fill: #95bc0b;
 stroke: #95bc0b;
 stroke-width: 0.5;

}

.animated { 

 fill: #666;

}

a:hover .animated, a:focus .animated { 

fill: #dfac20;

}

  1. at {
 fill: darkblue;
 stroke: #09c;
 stroke-width:0;
 transition: all 0.3s;

}

a:hover #at, a:focus #at { 

 fill: #09c;
 stroke-width:1;
 transition: all 0.3s;

}

  1. gear1 {
 transform:translate(47px,22px);

}

a:hover #gear1, a:focus #gear1 { 

 animation: rotation1 2s infinite linear;

}

@keyframes rotation1 { 

 0% { transform: translate(47px,22px) rotate(0deg);}
 100% {transform: translate(47px,22px) rotate(-360deg);}

}

  1. gear2 {
 transform:translate(20px,32px);

}

a:hover #gear2, a:focus #gear2 { 

 animation: rotation2 4s infinite linear;

}

@keyframes rotation2 { 

 0% { transform: translate(20px,32px) rotate(0deg);}
 100% {transform: translate(20px,32px) rotate(360deg);}

}


/* battery loading */

  1. battery-loading rect {
 opacity: 0;

} a:hover #battery-loading rect, a:focus-within #battery-loading rect { 

 opacity: 1;
 animation: charge 2s infinite;

} a:hover #battery-loading rect:nth-child(2), a:focus-within #battery-loading rect:nth-child(2) { animation-delay: .2s; } a:hover #battery-loading rect:nth-child(3), svg:focus-within #battery-loading rect:nth-child(3) { animation-delay: .4s; } a:hover #battery-loading rect:nth-child(4), a:focus-within #battery-loading rect:nth-child(4) { animation-delay: .6s; } @keyframes charge { 

 0%,30%,100% { opacity: .1; }
 70% { opacity: 1; }

}



@media (prefers-reduced-motion: reduce) { 

 a:hover *,
 a:focus * {
   animation: none !important;
 }

} </style> </head>

<body>

SVG-Icons - 2

<svg viewBox="0 0 500 131">

<defs> 

 <linearGradient id="verlauf1" x1="0%" y1="0%" x2="0%" y2="80%">
   <stop offset="0%" stop-color="#09c"></stop>
   <stop offset="100%" stop-color="white"></stop>
 </linearGradient>

</defs>

<a href=""> 

 <desc>Icon für Home-Button</desc>
 <rect class="background" x="1" y="1" width="59" height="59"/>
 <path d="M10,33 l20,-20 l20,20 v24 h-40z" class="normal"/>
 <rect x="40" y="12" width="5" height="14" fill="black"/>
 <rect x="15" y="40" width="10" height="17" class="animated" stroke="black" stroke-width="0.5"/> 
 <rect x="35" y="40" width="10" height="10" class="animated" stroke="black" stroke-width="0.5"/>
 <path fill="#c32e04" stroke="black" stroke-width="0.5" d="M1,3 a2,2 0 0,1 2,-2 h28 a2,2 0 0,1 0,4 h-26 v26 a2,2 0 0,1 -4,0 z" transform="translate(30,10) rotate(45)"/>

</a>

<a href="" transform="translate(70,0)"> 

 <desc>Icon für Datei-Button</desc>
 <rect class="background" x="1" y="1" width="59" height="59"/>
 <g id="datei">
   <path class="normal" d="M20,6 a4,4 0 0,1 2,-2 h27 l8,8 v37 a4,4 0 0,1 -2,2 h-33 a4,4 0 0,1 -2,-2 z"/>
   <path class="animated" d="M49,4 v6 a4,4 0 0,0 2,2 h6" stroke="black" stroke-width="0.5"/>
 </g>
 <use href="#datei" transform="translate(-10,6)"/>

</a>

<a href="" transform="translate(140,0)"> 

 <desc>Icon für Benutzereinstellungen</desc>
 <rect class="background" x="1" y="1" width="59" height="59"/>
 <g id="gear1">
   <circle cx="0" cy="0" r="10" fill="#999" stroke="#999" stroke-width="8" stroke-dasharray="1% 2%"/>
   <circle cx="0" cy="0" r="5" fill="white"/>
 </g>
 <g id="gear2">
   <circle cx="0" cy="0" r="15" fill="#333" stroke="#333" stroke-width="8" stroke-dasharray="1% 2%"/>
   <circle cx="0" cy="0" r="7.5" fill="white"/>
 </g>

</a>

<a href="" transform="translate(210,0)" > 

 <desc>Icon für "zur Kasse gehen"</desc>
 <rect class="background" x="1" y="1" width="59" height="59"/>
 <path fill="none" stroke="#666" stroke-width="3" d="M6,22 h7 a4,4 0 0,1 2,2 l5,15"/>
 <circle cx="6" cy="22" r="4" class="normal"/>
 <path class="normal" d="M15,27 a4,4 0 0,1 2,-2 h38 a4,4 0 0,1 1.5,3 l-5,15 a4,4 0 0,1 -2,2 h-28 a4,4 0 0,1 -2,-2z"/>
 <circle class="animated" cx="28" cy="53" r="6" fill="#666"/>
 <circle class="animated" cx="43" cy="53" r="6" fill="#666"/>

</a>

<a href="" transform="translate(280,0)"> 

 <desc>Icon für Telefon</desc>
 <rect class="background" x="1" y="1" width="59" height="59"/>
 <g transform="translate(-9,-3) scale(0.35,0.35)">
   <path fill="#ccc" stroke="black" stroke-width="1.65" d="M112 67L113 67C141 68 161 72 173 79 186 87 192 95 192 103 191 110 187 113 183 113 182 113 182 113 182 113L153 103C150 103 149 101 149 99 149 98 149 97 150 96 153 93 154 90 154 89 154 88 154 87 152 87L73 87C71 87 71 88 71 89 71 90 72 93 75 96 76 97 76 98 76 99 76 101 75 103 72 103L43 113C43 113 43 113 42 113 38 113 34 110 33 103 33 95 39 87 52 79 64 72 84 68 112 67L112 67z M129 96L129 91 139 91 139 101C139 105 145 108 156 111 167 115 172 124 172 137L172 172 53 172 53 137C53 124 58 115 69 111 80 108 86 105 86 101L86 91 96 91 96 96 129 96z"/>
 </g>
 <circle cx="30" cy="44" r="10.5" class="animated"/>
 <g fill="#ccc">
   <circle cx="30" cy="44" r="5.5"/>
   <circle cx="30" cy="36" r="1.5"/>
   <circle cx="30" cy="52" r="1.5"/>
   <circle cx="26" cy="50" r="1.5"/>
   <circle cx="25.5" cy="38" r="1.5"/>
   <circle cx="35" cy="50" r="1.5"/>
   <circle cx="23" cy="42" r="1.5"/>
   <circle cx="38" cy="46" r="1.5"/>
   <circle cx="23" cy="46" r="1.5"/>
   <circle cx="34.5" cy="37.8" r="1.5"/>
   <circle cx="37.5" cy="41" r="1.5"/>
 </g>

</a>

<a href="" transform="translate(350,0)"> 

 <desc>Icon für Kontakt-Formular</desc>
 <rect class="background" x="1" y="1" width="59" height="59"/>
 <path class="normal" d="M5,25 a4,4 0 0,1 2,-2 h46 a4,4 0 0,1 2,2 v30 a4,4 0 0,1 -2,2 h-46 a4,4 0 0,1 -2,-2 z" stroke="black" stroke-width="0.5"/>
 <path id="umschlag" fill="none" stroke="black" stroke-width="0.5" d="M6,24 l23,16 a4,4 0 0,0 2,0 l23-16"/>

</a>

<a href="" transform="translate(420,0)"> 

 <desc>Icon für Suche</desc>
 <rect class="background" x="1" y="1" width="59" height="59"/>
 <path d="M0,0 h33 a2.5,2.5 0 0,1 0,5 h-33z" class="normal" transform="translate(33,30) rotate(45)"/>
 <circle cx="20" cy="20" r="18" class="normal"/>
 <circle cx="20" cy="20" r="16" stroke-width="0.5" stroke="black" fill="url(#verlauf1)"/>

</a>

<a href="" transform="translate(0,70)"> 

 <desc>Icon für Home-Button</desc>
 <rect class="background" x="1" y="1" width="59" height="59"/>
 <rect x="10" y="33" width="40" height="24" class="iconfill2"/>
 <rect x="40" y="13" width="5" height="15" fill="black"/>
 <path d="M8,33 l22,-20 l22,20 z" fill="#c32e04" stroke="black" stroke-width="0.5"/>

</a>

<a href="" transform="translate(70,70)"> 

 <desc>Icon Batterie wird geladen</desc>
 <rect class="background" width="59" height="59"/>
 <g id="battery" class="iconfill2">
   <rect width="9" height="14" rx="3" ry="3" x="47" y="23"/>
   <rect width="48" height="34" rx="4" ry="4" x="3" y="13"/>
   <g id="battery-loading" class="iconfill3" stroke="none">
     <rect width="9" height="28" rx="2" ry="2" x="6"  y="16"/>
     <rect width="9" height="28" rx="2" ry="2" x="17" y="16"/>
     <rect width="9" height="28" rx="2" ry="2" x="28" y="16"/>
     <rect width="9" height="28" rx="2" ry="2" x="39" y="16"/>
   </g>
 </g>

</a>

<a href="" transform="translate(140,70)"> 

   <desc>Icon für Benutzereinstellungen</desc>
   <rect class="background" x="1" y="1" width="59" height="59"/>
   <path id="schraubendreher" class="iconfill2" d="M1,1 h11 v33 h-4 v20 l1.5,5 l-2,8 h-2 l-2,-8 l1.5,-5 v-20 h-4 z" transform="translate(50,3) rotate(45)"/>
   <path id="schluessel" class="iconfill3" d="M1,6 a10,8 0 0,1 19,1 h3 v6 h4 v4 h-7 a10,8 0 0,1 -19,-1 h8 l3,-5 l-3,-5z m38,1 h20 a5,5 0 0,1 0,10 h-20z" transform="translate(16,3) rotate(45)"/>
 </a>

<a href="" transform="translate(210,70)" > 

 <desc>Icon für "zur Kasse gehen"</desc>
 <rect class="background" x="1" y="1" width="59" height="59"/>
 <rect x="8" y="25" width="25" height="20" rx="2" ry="2" fill="darkblue" transform="skewX(15)"/>
 <rect x="38" y="25" width="25" height="20" rx="2" ry="2" fill="darkblue" transform="skewX(-15)"/>
 <path fill="darkblue" d="M17,34 l-3,-9 a4,4 0 0,0 -2,-2 h-2 a4,4 0 1,1 0,-3 h4 a4,4 0 0,1 2,2 l3,9  z"/>
 <circle cx="28" cy="53" r="6" fill="darkblue"/>
 <circle cx="43" cy="53" r="6" fill="darkblue"/>

</a>

<a href="" transform="translate(280,70)" > 

 <desc>Icon für Sprechstunden</desc>
 <rect class="background" x="1" y="1" width="59" height="59"/>
 <circle cx="13" cy="35" r="8" class="iconfill3"/>
 <path d="m1,60 c-5,-15 30,-15 25,0" class="iconfill3"/>
 <circle cx="45" cy="35" r="8" class="iconfill2"/>
 <path d="m33,60 c-5,-15 30,-15 25,0" class="iconfill2"/>
 <g transform="translate(18,13) rotate(33)">
   <path stroke-width="2" stroke="#95bc0b" fill="none" d="m10,10 a10,10 0 0,1 10,10"/>
   <path stroke-width="2" stroke="#95bc0b" fill="none" d="m10,5 a13,13 0 0,1 15,15"/>
 </g>
 <text transform="translate(30,20)" style="font-size: 8px;  text-anchor:middle; fill:#09c;">Sprechstunden</text>

</a>

<a href="" transform="translate(350,70)"> 

 <desc>Icon für Kontaktformular</desc>
 <rect class="background" x="1" y="1" width="59" height="59"/>
 <rect x="0" y="20" width="60" height="40" rx="4" ry="4" fill="darkblue"/>
 <path d="M2,22 l28,18 l28,-18 l-28,-20 z" stroke-width="2" stroke="darkblue" fill="white"></path>
 <path d="M31,41 l26,16" stroke-width="2" stroke="white"></path>
 <path d="M29,41 l-26,16" stroke-width="2" stroke="white"></path>
 <text id="at" transform="translate(30,27)" style="font-size:25px;text-anchor:middle;">@</text>

</a> 

 <a href=""  transform="translate(420,70)">
 <desc>Icon für Suche</desc>
 <rect class="background" x="1" y="1" width="59" height="59"/>
 <circle cx="20" cy="20" r="18" stroke-width="3" stroke="#777" fill="url(#verlauf1)"/>
 <path d="M34,34 l23,23" stroke-width="5" stroke="#777" stroke-linecap="round"/>

</a>

</svg>

Zurück zum

Diese Icons sind nur Entwürfe. Für weitere Ideen zwecks Gestaltung und Animation sind wir immer dankbar.

</body> </html>

Abgerufen am 29.12.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:SVG-Icons-2.html"