Contao-Camp 2024
Ergebnis 1 bis 3 von 3

Thema: svg als svg und nicht als img einbinden

  1. #1
    Contao-Nutzer
    Registriert seit
    15.01.2018.
    Beiträge
    61

    Standard svg als svg und nicht als img einbinden

    Ein Hallo in die Runde,

    gerne möchte ich, wie der Titel schon verrät, eine svg Grafik als solche einbinden, um über CSS fill/stroke usw. steuern zu können. Welchen Codeschnipsel benötige ich dazu, damit es nicht im img tag landet?

    In diesem Fall binde ich ein normales Bild folgendermaßen ein:
    HTML-Code:
            <img src="<?= $this->getImageObject($this->category_image)->src ?>">
    Wie schaut es bei einer svg aus?

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.803
    Partner-ID
    10107

    Standard

    Da müsstest du den Inhalt mit file_get_contents (oder ähnlichem) auslesen und ausgeben.

  3. #3
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Für "reines" Inline SVG erstelle ich im Contao templates Verzeichnis ein template ala "icon-xyz.html5" mit den optimierten SVG Daten und binde das dann über das InsertTag {{file::icon-xyz.html5}} ein.
    Via css kann man das dann variieren .icon svg {fill: red;} etc. bzw. wenn das SVG fill="currentColor" beinhaltet auch ganz normal über .icon {color: red;} zum Beispiel ...
    Allerdings unhandlich bei vielen Icons ...

    Mit folgenden Infos bietet sich an die SVG Icons als encoded background url's zu pflegen und damit dann gegebenenfalls in der data url mit verschiedenen color fills zu arbeiten:
    https://css-tricks.com/probably-dont-base64-svg/
    https://codepen.io/tigt/post/optimiz...s-in-data-uris
    https://hackernoon.com/how-to-use-sa...g-3ecdfc53ea91

    Hat zwar so nichts mit der Erweiterung zu tun - ist eher eine grundsätzliche Frage zur Vorgehensweise ...
    Ich wäre auch an eurer "best proofed" Vorgehensweise hierzu interessiert.
    Franko
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 2 (Registrierte Benutzer: 0, Gäste: 2)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •