Download the PHP package delirius/contao-svg-inline-sprite without Composer
On this page you can find all versions of the php package delirius/contao-svg-inline-sprite. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download delirius/contao-svg-inline-sprite
More information about delirius/contao-svg-inline-sprite
Files in delirius/contao-svg-inline-sprite
Package contao-svg-inline-sprite
Short Description Das Inhaltselement ermöglicht die Ausgabe von Inline-SVG und SVG Sprite (Symbol). Dabei wird das SVG direkt in das HTML-Markup geschrieben und kann mit CSS angepasst werden.
License GPL-3.0-or-later
Informations about the package contao-svg-inline-sprite
SVG Inline / SVG Sprite
Das Inhaltselement ermöglicht die Ausgabe von Inline-SVG und SVG Sprite (Symbol). Dabei wird das SVG direkt in das HTML-Markup geschrieben und kann mit CSS angepasst werden.
Contao
Contao: ^5.0
PHP: ^8.1
Screenshot
SVG Inline
Der Inhalt der SVG Datei wird gelesen und als HTML-Markup ausgegeben.
<svg><path d="M6 12h36v4.031h-36v-4.031zM6 25.969v-3.938h36v3.938h-36zM6 36v-4.031h36v4.031h-36z"></path></svg>
SVG Sprite (Symbol)
Ein SVG Sprite beinhaltet mehrere Symbole. Der Inhalt der SVG Datei wird gelesen und es kann ein Symbol ausgewählt werden. svg-sprite-example.svg
Bei der Ausgabe wird das Symbol sowie das komplette SVG-Sprite in das HTML-Markup geschrieben. Das Symbol wird mit use
verlinkt. Das SVG-Sprite wird am Ende der Seite in einen unsichbarem Element platziert. Das SVG-Sprite wird nur einmal ausgegeben, auch wenn mehrere Symbole auf einer Seite verwendet werden.
Symbol
<svg><use href="#icon-menu"></use></svg>
Am Ende der Seite
Gut zu wissen
SVG Sprite Generatoren
Die Farbe wird in CSS mit fill:#336699
oder stroke:#336699
definiert. Wenn im SVG die Farbe mit currentColor
definiert ist, übernimmt es die Farbe des übergeordnetem Element und wird mit color:#336699
definiert.
Die meisten Browser verhindern das laden einer SVG-Datei von einer lokalen Festplatte aus (file://, C:\). Wird das SVG direkt in das HTML-Markup geschrieben, entsteht dieses Problem nicht.