SVG Pattern – Sechseck (Hexagon)


Warning: Undefined variable $image in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 105

Warning: Undefined variable $twittervia in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 135

Warning: Undefined variable $content2 in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 114

In meinem heutigen Beispiel zeige ich dir ein Muster das aus einem Sechseck (Hexagon) konstruiert wurde. In meinem Beispiel vom 14. Juni Pattern in SVG habe ich bei den Würfeln bereits bei der Konstruktion mit einem Hexagon gearbeitet. Zum besseren Verständnis habe ich den Hintergrund des befüllten Rechteckes mit Hilfe des opacity-Attributes animiert.

SVG Pattern Hexagon animiert

SVG Pattern – Flechtmuster Wabe


Warning: Undefined variable $image in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 105

Warning: Undefined variable $twittervia in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 135

Warning: Undefined variable $content2 in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 114

In diesem Beitrag siehst du ein typisches Wabenflechtmuster eines Stuhls. Ich habe mir das Muster angesehen und danach ein Pattern in SVG konstruiert. Das dargestellte Muster habe ich in der linken Abbildung auf 50% verkleinert und damit das Quadrat gefüllt. Im rechten Quadrat habe ich die Transparenz auf 50% reduziert und das originale Pattern im Quadrat platziert.

SVG Pattern Wabenmuster

Wenn du dir das Muster ansehen möchtest, kannst du dir Abbildung mit rechten Maustaste in einem neuen Tab oder Fenster ansehen und dort in den Quelltext schauen.

Beispiel auf Codepen.io

See the Pen Comb seamless repeating pattern by Norbert Mesch (@itsnorbat) on CodePen.

SVG Pattern – 3D Webmuster


Warning: Undefined variable $image in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 105

Warning: Undefined variable $twittervia in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 135

Warning: Undefined variable $content2 in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 114

Im dargestellten Beispiel siehst du das durch die Animation herausgehobene 3D Webmuster, das sich nahtlos wiederholt. Weiter unten habe ich das Muster mit Hilfe des transformPattern-Attributes und der Funktion rotate() gedreht und mit anderen Farben gefüllt. Das Muster ist darüber hinaus mit der Funktion scale() im transformPattern-Attribute um den Faktor 2 von 120x80px auf 240x160px vergrößert.

SVG 3D weaving pattern

Hinweis: Mit einem Rechtsklick auf die Abbildung kannst du die SVG-Datei in einem eigenen Tab öffnen und dir dort den Quelltext des Musters ansehen.

Farbvariationen mit Drehungen/Skalierungen [transformPattern=“rotate(x) scale(x)“]

 

SVG 3D weaving pattern red 90°

SVG 3D weaving pattern yellow 270°

Beispiel auf Codepen.io

In meinem Beispiel auf codepen.io habe ich zwei Slider implementiert. Dort kannst du das Muster über zwei Slider rotieren und/oder skalieren.

See the Pen SVG 3D seamless weaving pattern by Norbert Mesch (@itsnorbat) on CodePen.

SVG Pattern – Muster aus Viertel- und Halbkreisen animiert


Warning: Undefined variable $image in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 105

Warning: Undefined variable $twittervia in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 135

Warning: Undefined variable $content2 in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 114

In diesem Beispiel siehst du Muster aus Viertelkreisen. Die dargestellten Kreise sind mit den Mustern gefüllt und animiert. Mit der Animation möchte ich die zeigen, wie die Muster rotiert aussehen würden. In diesem Beispiel war es aber einfacher die Kreise zu rotieren zu lassen, weil sich das Attribut transformPattern nicht animieren lässt. Am Effekt ändert sich dadurch aber nichts.

SVG Pattern aus drei Viertelkreisen

Die verschiedenen Drehrichtungen werden einfach dadurch erzeugt, dass im linken Kreis die Animation von 0° bis 360° läuft und im rechten Kreis von 360° bis 0°. Mit dem Attribut repeatCount=“indefinite“ rotieren die Kreise ununterbrochen.

SVG Pattern Viertelkreise animiert
Animierte Kreise mit Füllmuster aus drei Viertelkreisen

Variationen mit mehr Kreisen

Im folgenden Beispiel habe ich das obige Muster um weitere Vollkreise über die Ecken des Musters erweitert. Der gefüllte Punkt ist ein Kreis ohne Kontur mit eine Radius r=4. Der innere Vollkreis hat seinen Ursprung ebenfalls in den vier Ecken des Musters, ohne Füllung aber wieder mit einer orange gefärbten Kontur (Stroke) von 3px Stärke. Die SVG-Quellen kannst du dir über die Funktion Entwicklermodus deines Browsers ansehen oder indem du die Grafik einfach in einem neuen Tab anzeigen lässt und dann auf Seitenquelltext anzeigen gehst. Über das Attribut transfromPattern und die Funktion rotate(-45) habe ich das Muster um 45° gegen den Uhrzeigersinn gedreht.

<pattern id="C3TLBLBR" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="rotate(-45)">
   ...
</pattern>

Variationen mit rechteckigem Hintergrund

Im folgenden Beispiel habe ich das zuvor quadratische Muster durch ein doppelt so breites, rechteckiges Muster ersetzt und zwei Halbkreise mit ihrem Zentrum in der Mitte am oberen und unteren Rand des Rechtecks platziert. Das Muster siehst du in der linken Abbildung.

SVG Pattern Halb- und Viertelkreise auf einem Rechteck

Beispiel auf Codepen

See the Pen Seamless SVG pattern by Norbert Mesch (@itsnorbat) on CodePen.

SVG Pattern – Bauernkaro


Warning: Undefined variable $image in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 105

Warning: Undefined variable $twittervia in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 135

Warning: Undefined variable $content2 in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 114

In meinem letzten Beitrag habe ich dir gezeigt, wie du wiederkehrende Muster (Pattern) mit SVG erstellen kannst. Hier siehst du verschiedene Baunernkaros die sich mit Hilfe zweier, übereinander gelegter Rechtecke erstellen lassen. Das Bauernkaro ist im englischsprachigen Raum auch unter dem Begriff Gingham-Muster oder Vichy-Muster bekannt.

Konstruktion des Musters

Die Rechtecke werden mit einer Füllfarbe ohne Rand gefüllt und mit einer Transparenz (Opacity) von 50% (0.5) versehen. Im Bereich der Überlappung entsteht durch die Transparenz das dunkle Quadrat (siehe linke Abbildung). Das einzelne Pattern findest du in der rechten Abbildung wieder.

SVG Baunerkaro animiert SVG Baunerkaro animiert

Hintergrund festlegen [fill=“url(#…)“]

Das obige Muster habe ich in einem <defs>-Element von 40 x 40 px angelegt und damit im folgenden Beispiel die Kreise mit Konturen in verschiedenen Farbvarianten gefüllt.

 

 

Code-Beispiel für blaues Bauernkaro

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="canvas1" width="340" height="340">
 <title>Bauernkaro blau</title>
 <desc>Vichy-Muster, gingham</desc>
 <defs>
   <pattern id="vichy" width="40" height="40" patternUnits="userSpaceOnUse">
     <rect x="0" y="0" width="20" height="40" stroke="none" fill="#2980b9" opacity="0.5"/>
     <rect x="0" y="0" width="40" height="20" stroke="none" fill="#2980b9" opacity="0.5"/>
   </pattern>
 </defs>
 <circle cx="170" cy="170" r="168" fill="url(#vichy)" stroke="#2980b9" stroke-width="4px"/>
</svg>

Endlose Variationsmöglichkeiten

In den folgenden Beispielen habe ich den obigen Mustern einfach weitere Fäden, farbige Linien bzw. Rechtecke mit einem Abstand vom oberen und linken Rand des Musters hinzugefügt. Die Linien sind mit einer Transparenz von 30% (0.3) versehen.

Es lassen sich aber auch andere Hintergründe wählen auf denen dann z.B. weiße oder andersfarbige Rechtecke oder Linien mit Transparenzen platzieren lassen.

Mit dem zusätzlichen Attribut patternTransform lässt sich das gesamte Muster transformieren. Im Beispiel SVG Bauernkaro Rot/Blau rotiert 45° ist das Muster aus dem vorherigen Beispiel um 45° mit rotate(45) gedreht .

<pattern id="vichy" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
   ...
</pattern>

oder skewX(20) | skewY(20)

<pattern id="vichy" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="skewX(20)">
   ...
</pattern>

mit der Funktion scale() im patternTransform-Attribut lässt sich das Muster auch skalieren.

<pattern id="vichy" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="scale(3)">
   ...
</pattern>

Pattern in SVG


Warning: Undefined variable $image in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 105

Warning: Undefined variable $twittervia in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 135

Warning: Undefined variable $content2 in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 114

Mit Pattern (Muster) lassen sich Flächen oder Linien in SVG füllen. So lässt sich wie im folgenden Beispiel auf einfache Weise eine Fläche mit kariertem Hintergrund erstellen.

Innerhalb der Definitionen (<defs>-Element) wird das <pattern>-Element angelegt. Über das Attribut id wird später das Muster referenziert. Die Attribute width und height legen die Größe der Musterfläche fest. Im <pattern>-Element wird ein Rechteck mit einer Breite und Höhe von 20 Pixeln und dem Ursprung  x,y = 0,0 angelegt. Das Rechteck wird mit einer grauen Linie, einer Linienstärke von 0,5 und einer Füllfarbe Weiß formatiert.

<defs>
   <pattern id="q20px" width="20" height="20" patternUnits="userSpaceOnUse">
      <rect x="0" y="0" width="20" height="20" stroke="grey" stroke-width="0.5" fill="white"/>
   </pattern>
</defs>

Pattern mit fill-attribute verwenden

Mit Hilfe des fill-Attributes wird das Pattern einem SVG-Element zugewiesen. Im Beispiel wird ein Rechteck mit einer Größe von 400 x 400 Pixeln angelegt und mit dem zuvor erstellten Muster gefüllt.

fill=“url(#q20px)“ füllt das Rechteck mit dem Muster.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="canvas1" width="320" height="320">
   <defs>
      <pattern id="q20px" width="20" height="20" patternUnits="userSpaceOnUse">
         <rect x="0" y="0" width="20" height="20" stroke="grey" stroke-width="0.5" fill="white"/>
      </pattern>
   </defs>
   <rect x="0" y="0" rx="0" ry="0" width="320" height="320" fill="url(#q20px)" stroke="none"/>
</svg>

Ergebnis

Auf der linken Seite siehst du das Ergebnis des obigen Quelltextes. Rechts daneben habe ich einen Kreis und ein abgerundetes Quadrat platziert.

SVG pattern SVG pattern content

Beispiel Schachbrettmuster

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="canvas1" width="400" height="400">
<defs>
   <pattern id="bwsquare50px" width="100" height="100" patternUnits="userSpaceOnUse">
      <rect x="0" y="0" width="50" height="50" stroke="none" fill="#f0c30e"/>
      <rect x="50" y="0" width="50" height="50" stroke="none" fill="#d25300"/>
      <rect x="0" y="50" width="50" height="50" stroke="none" fill="#d25300"/>
      <rect x="50" y="50" width="50" height="50" stroke="none" fill="#f0c30e"/>
   </pattern>
</defs>
<rect x="0" y="0" rx="0" ry="0" width="400" height="400" fill="url(#bwsquare50px)" stroke="grey" stroke-width="2"/>
</svg>

SVG Pattern Schachbrett

Beispiel Würfel in verschiedenen Farbvarianten

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="canvas1" width="300" height="300">
<defs>
   <pattern id="cube" width="50px" height="86.52px" patternUnits="userSpaceOnUse">
      <polygon id="top" fill="#FCCB4F" points="50,0 50,0 25,14.43 0,0"/>
      <polygon id="topleft" fill="#F8B334" points="25,14.43 25,43.298 0,28.858 0,0"/>
      <polygon id="topright" fill="#F9E532" points="50,0.021 50,28.868 25,43.298 25,14.43 "/>
      <polygon id="midleft" fill="#FCCB4F" points="25,43.298 0,57.715 0,28.868"/>
      <polygon id="midright" fill="#FCCB4F" points="50,28.868 50,57.758 25,43.298"/>
      <polygon id="bottomleft" fill="#F9E532" points="25,43.362 25,72.156 0,86.52 0,86.52 0,57.715"/>
      <polygon id="bottomright" fill="#F8B334" points="50,57.715 50,86.52 50,86.52 25,72.156 25,43.298"/>
      <polygon id="bottom" fill="#FCCB4F" points="50,86.52 0,86.52 25,72.156 25,72.156"/>
   </pattern>
</defs>
 <rect x="0" y="0" rx="0" ry="0" width="300" height="300" fill="url(#cube)" stroke="none"/>
</svg>

 

SVG Pattern WürfelSVG Pattern Würfel GrünSVG Pattern Würfel PurpleSVG Pattern Blau

Weitere Details zur Arbeit mit Pattern findest du hier:

http://www.w3.org/TR/SVG/pservers.html#Patterns

SVGs in WordPress


Warning: Undefined variable $image in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 105

Warning: Undefined variable $twittervia in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 135

Warning: Undefined variable $content2 in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 114

Die folgende, nicht ganz originalgetreue Zeichnung des Labyrinths von Chartres habe ich in Illustrator erstellt und als SVG (Scalable Vector Graphic ) exportiert. SVG-Dateien kannst du in einem beliebigen Text-Editor öffnen und bearbeiten. Über das viewBox-Attribut und die Attribute width und height im SVG-Element kannst du ganz einfach die Größe der Zeichnung verlustfrei skalieren.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600px" height="600px" viewBox="0 0 1418 1418">...</svg>

Sicherheitsrisiko von SVG-Dateien in WordPress

WordPress zeigt normalerweise aus Sicherheitsgründen keine SVG-Dateien an. Mehr über das Sicherheitsrisiko von SVG-Dateien, die auf XML-Strukturen basieren, kannst du in diesem informativen Videobeitrag von Mario Heidreich auf YouTube erfahren.

Die Anzeige von SVG-Dateien in deinem WordPress Blog ist prinzipiell dann ein Sicherheitsrisiko, wenn nicht klar ist, wer diese SVG-Datei erstellt bzw. in deine WordPress Mediathek hochgeladen hat. Grundsätzlich kann jede SVG-Datei schädlichen JavaScript Code enthalten und damit auch deinen Rechner infizieren.

Bevor du SVG-Dateien in deinem Blog zulässt, sollte sichergestellt sein, dass nur du bzw. dir vertraute Personen sichere SVG-Dateien ohne schädlichen Code in die Mediathek hochladen können. Außerdem sollte im Idealfall die Kommentfunktion in deiner WordPress Installation deaktiviert sein. Über einen Kommentar wäre es ein Leichtes, eine SVG-Datei über ein img-Element in deine Seite einzuschleusen, auch wenn die Datei dann nicht in deiner Mediathek liegt.

Labyrinth von Chartres

Labyrinth von Chartres als SVG-Datei

Animierte SVG-Dateien

Auch der Einsatz animierter SVG-Dateien ist jetzt möglich.

Labyrinth von Chartres animiert

 

Labyrinth von Chartres animiert (24 kByte)

HowTo

Du musst lediglich zwei Änderungen in deiner WordPress Installation vornehmen. Die erste Änderung machst du in der Datei functions.php in deinem (Child-)Theme.

  • Die erste Funktion ermöglicht es über einen Hook SVG-Dateien über den Upload-Bereich von WordPress hochzuladen.
  • Die zweite Funktion verändert die Dimension von SVG-Dateien, die im Normalfall in WordPress auf 1 x 1 Pixel gestellt ist. Diese Funktion habe ich hier gefunden:

SVG images get width and height attributes with values 1

Nach dem Speichern der Änderungen in der functions.php kannst du jetzt bereits SVG-Dateien in die Mediathek importieren und in deinen Seiten und Beiträgen verwenden.

function cc_mime_types($mimes) {
 $mimes['svg'] = 'image/svg+xml';
 return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

/**
 * Removes the width and height attributes of tags for SVG
 * 
 * Without this filter, the width and height are set to "1" since
 * WordPress core can't seem to figure out an SVG file's dimensions.
 * 
 * For SVG:s, returns an array with file url, width and height set 
 * to null, and false for 'is_intermediate'.
 * 
 * @wp-hook image_downsize
 * @param mixed $out Value to be filtered
 * @param int $id Attachment ID for image.
 * @return bool|array False if not in admin or not SVG. Array otherwise.
 */
function wg_fix_svg_size_attributes( $out, $id )
{
 $image_url = wp_get_attachment_url( $id );
 $file_ext = pathinfo( $image_url, PATHINFO_EXTENSION );

 if ( ! is_admin() || 'svg' !== $file_ext )
 {
 return false;
 }

 return array( $image_url, null, null, false );
}
add_filter( 'image_downsize', 'wg_fix_svg_size_attributes', 10, 2 );

Vielleicht ist dir aufgefallen, dass Beitragsbilder vom Typ SVG jetzt noch nicht angezeigt werden. Ein Blick auf die CSS-Klassen im Entwicklermodus deines Browsers verschaffen auch hier Abhilfe.

In der styles.css Datei fügst du einfach folgende CSS-Klasse hinzu:

img.wp-post-image[src*="svg"] {
   width: 300px;
   height: auto
}

Jetzt sollten in deinen Seiten und Beiträgen auch SVG als Beitragsbilder angezeigt werden.