SVG/Tutorials/Icons

Aus SELFHTML-Wiki
< SVG‎ | Tutorials(Weitergeleitet von SVG/Anwendung und Praxis/Icons)
Wechseln zu: Navigation, Suche

SVG-Icons zeichnen sich gegenüber kleinen Grafiken oder Icon-Fonts durch viele Vorteile aus, da sie

  • jederzeit direkt bearbeiten werden können
  • als Vektorgrafiken immer gestochen scharf skalierbar sind
  • durch CSS und mit den Möglichkeiten von SVG mehrfarbig gestaltet, mit Filtern verändert und sogar animiert werden können.
  • ebenfalls in Sprites zusammengefasst werden können

Aufbau[Bearbeiten]

Einbindung in Webseiten[Bearbeiten]

Bei der Einbindung Ihrer Icons gibt es mehrere Möglichkeiten, die der Einbindung von SVG in HTML entsprechen.

Beispiel ansehen …
<svg viewBox="0 0 500 61">
  <defs>
    <symbol id="suche-flat">
      <desc>Icon für Suche</desc>	
      ...
    </symbol> 
 
    <svg id="suche-skeumorph" width="60" height="60" viewBox="0 0 700 700">
      <desc>Icon für Suche</desc>		
      <defs>
        <linearGradient id="linearGradient2817">
        ...
      </defs>
      ...
    </svg>
   </defs>	 
 
  <a href="" xlink:href="">
  <use xlink:href="#suche-flat" x="0" y="0" transform="translate(350,0)"></use>
  </a>	
  <a href="" xlink:href="">
  <use xlink:href="#suche-skeumorph" x="0" y="0" transform="translate(420,0)"></use>
  </a>
</svg>
In diesem Beispiel werden zwei SVG-Grafiken eingebunden in Links. Die linke Grafik im flat-Design besteht nur aus wenigen Grundformen, die im Definitionsabschnitt festgelegt und mit use aufgerufen werden.
Die rechte Grafik ist sehr detailliert und in der Ursprungsansicht 700 x 700 px groß. Da sie einen eigenen Definitionsabschnitt enthält, ist ein Verwenden von symbol, das nur Grundformen erlaubt, nicht möglich. Stattdessen wird innerhalb des svg-Elements ein weiteres svg-Element notiert. Über die Höhen- und Breitenangaben und die viewBox wird die Grafik passend skaliert.
Die Icons bestehen aus Links, die wie in HTML mit dem a-Element realisiert werden. Da in SVG 2 Verweise wie in HTML künftig mit dem href-Attribut referenziert werden, stehen beide Varianten im Code.
Beachten Sie: Im Firefox aktivieren :hover und :focus Pseudoklassen, die mit CSS angesprochen werden. Dies funktioniert beim Aufrufen mit dem use-Element im Chrome und Opera nicht. Hier müssten die Inhalte direkt in das zu animierende objekt notiert werden.

Weitere Informationen über die Einbindung von Icons finden Sie unter: Sprites

Gestaltung[Bearbeiten]

einheitlicher CSS-Stil[Bearbeiten]

Durch die Möglichkeit die Präsentationsattribute der SVG-Elemente in CSS in Klassen zusammenzufassen, können Sie Multi-Color-Icons mit einem einheitlichen Erscheinungsbild gestalten.

Beispiel ansehen …
<a href="" xlink:href="">
    <desc>Icon für Home-Button</desc>	
    <rect class="background" x="1" y="1" width="59" height="59" />			
    <rect x="10" y="35" width="40" height="24" fill="#ccc" stroke="black" stroke-width="0.5" />
    <rect x="40" y="15" width="5" height="15" fill="black" />
    <path d="M8,35 l22,-20 l22,20 z" fill="#c32e04" stroke="black" stroke-width="0.5" />
    <rect x="15" y="45" width="8" height="14" class="window" stroke="black" stroke-width="0.5" />	  
    <rect x="35" y="45" width="8" height="8" class="window" stroke="black" stroke-width="0.5" />	 
</a>
Die sechs dargestellten Icons zeigen die Möglichkeiten, mit nur wenigen Grundformen mehrfarbige Icons zu kreieren.
Empfehlung: Verwenden sie einen einheitlichen Stil (Skeumorphisches oder Flat-Design) für Ihre Icons - es wirkt ruhiger und stimmiger.

Animationszustände[Bearbeiten]

Die obigen Icons sind interaktiv: Wenn Sie durchtabben oder mit der Maus über die Links fahren, werden :hover und :focus aktiviert.

Beispiel ansehen …
.background {
  fill: none;
}

a:hover .background,
a:focus .background {
  fill: #fffbf0;
  stroke: #e7c157;
  stroke-width:1;
}

.window {
  fill: #666;
}

a:hover .window,
a:focus .window {
 fill: #dfac20;
}
Zur besseren Sichtbarkeit wird bei :hover und :focus ein gelber Hintergrund hinter die Icons gelegt. Im Home-Icon werden die normalerweise dunklen Fenster beleuchtet.
  <a href="" xlink:href="">
      <desc>Icon für Home-Button</desc>	
	  <rect class="background" x="1" y="1" width="59" height="59" />			
          ...
	  <rect x="15" y="45" width="8" height="14" class="window" stroke="black" stroke-width="0.5"/>	  
	  <rect x="35" y="45" width="8" height="8" class="window" stroke="black" stroke-width="0.5"/>	 
  </a>
In SVG ist es nicht möglich, einem Verweis oder einer Gruppierung eine feste Größe und dafür eine Hintergrundfüllung zu geben. Um dies zu erreichen, wird der Grafik ein Rechteck in den gewünschten Dimensionen untergelegt. Normalerweise erhält es keine Füllung - bei :hover und :focus erhält es eine gelbe Füllung, die als Hintergrund für das Icon wirkt.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]

Deutsch:


Englisch:

Beispiele