SVG/Anwendung und Praxis/Texturen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Während Sie mit CSS Hintergründe nur flächig oder mit einem Farbverlauf füllen können, stehen Ihnen bei SVG eine Vielzahl von Möglichkeiten offen.

In den ersten beiden Teilen unserer Mini-Serie werden wiederkehrende geometrische Muster mit dem pattern-Element festgelegt und dann gekachelt wiedergegeben. In diesem Artikel werden unregelmäßige Texturen erzeugt, die natürlichen Oberflächen nachempfunden sind, jedoch trotzdem ohne extern referenzierte Grafiken auskommen. Dabei sehen Sie Anwendungsbeispiele für SVG-Filter.

Papier[Bearbeiten]

Beispiel ansehen …
  <filter id="papier-1" x="0%" y="0%" width="100%" height="100%">
    <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" />
    <feDiffuseLighting lighting-color="white" surfaceScale="2" result="diffLight">
      <feDistantLight azimuth="45" elevation="35"/>
    </feDiffuseLighting>
  </filter>

  <filter id="papier-2" x="0%" y="0%" width="100%" height="100%">
    <feTurbulence type="fractalNoise" baseFrequency="0.08" numOctaves="10" />
    <feDiffuseLighting lighting-color="white" surfaceScale="2" result="diffLight">
      <feDistantLight azimuth="45" elevation="35"/>
    </feDiffuseLighting>
  </filter>
In diesem Beispiel wird mit dem feTurbulence-Filter eine unregelmäßige Textur erzeugt. Mit feDiffuseLighting werden die Unebenheiten beleuchtet, sodass die Textur besser sichtbar wird.

Ein ähnliches Ergebnis erzielt Amelia Bellamy-Royds mit sehr viel mehr Filtern.[1].

Metall[Bearbeiten]

https://www.packtpub.com/books/content/inkscape-svg-filter-effects

Holz[Bearbeiten]

Himmel, Wolken und Wasser[Bearbeiten]

Mit Hilfe des FeTurbulence-Filters können Sie wie in diesem Beispiel unregelmäßige, wolkenähnliche Strukturen erzeugen.

Diese können sogar animiert werden:


Beispiel ansehen …
<filter id="cloud" color-interpolation-filters="sRGB" x="0%" y="0%" height="100%" width="100%">
  <feTurbulence type="fractalNoise" result="cloudbase" baseFrequency=".0025" numOctaves="5" seed="24"/>
  <feColorMatrix in="cloudbase" type="hueRotate" values="0" result="cloud">
    <animate attributeName="values" from="0" to="360" dur="20s" repeatCount="indefinite"/>
  </feColorMatrix>
  <feColorMatrix in="cloud" result="wispy" type="matrix" 
                            values="4 0 0 0 -1
                                    4 0 0 0 -1
                                    4 0 0 0 -1
                                    1 0 0 0 0   
                                    "/>
  
  <feFlood flood-color="#113388" result="blue"/>

  <feBlend mode="screen" in2="blue" in="wispy"/>
  
  <feGaussianBlur stdDeviation="4"/>
 
  <feComposite operator="in" in2="SourceGraphic"/>
  
</filter>
In diesem Beispiel wird mit dem Filter #cloud eine wolkenähnliche Textur erzeugt. Diese wird dann mit SMIL animiert. Um die animation auch im IE und in Chrome sichtbar zu machen, wird FakeSmile als Polyfill eingebunden.


Weblinks[Bearbeiten]

  1. codepen.io SVG Textures Paper