Connie: Aus SVG ein Bild impng-Format erzeugen

Hallo, auf dieser Seite werden mit SVG diverse Formen, z.B. Rechtecke erzeugt. Wie kann ich aus diesem HTML und CSS eine Grafikdatei png o.ä. erzeugen und abspeichern? Gruß Connie

  1. @@Connie

    auf dieser Seite werden mit SVG diverse Formen, z.B. Rechtecke erzeugt. Wie kann ich aus diesem HTML und CSS eine Grafikdatei png o.ä. erzeugen und abspeichern?

    Screenshot machen, als Datei speichern.

    Aber warum sollte man eine Vektorgrafik in eine Pixelgrafik umwandeln wollen?

    LLAP 🖖

    --
    „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
    1. Servus!

      Wie kann ich aus diesem HTML und CSS eine Grafikdatei png o.ä. erzeugen und abspeichern?

      Aber warum sollte man eine Vektorgrafik in eine Pixelgrafik umwandeln wollen?

      Ich glaube, die unausgesprochene Frage war nach einem IE8-Fallback, wie er in vielen älteren Tutorials und Büchern empfohlen wird.

      @@Connie

      Da SVG von allen modernen Browsern dargestellt wird - IE8 hat unter 0.4% Reichweite - benötigt man dies heute nicht mehr.

      Es gab plugins, dies diese png-Grafiken dynmisch erzeugten.

      Herzliche Grüße

      Matthias Scharwies

      --
      Es gibt viel zu tun: ToDo-Liste
      1. @@Matthias Scharwies

        Da SVG von allen modernen Browsern dargestellt wird - IE8 hat unter 0.4% Reichweite - benötigt man dies heute nicht mehr.

        Der Alternativtext sollte ja ohnehin vorhanden sein und dann auch von SVG-unfähigen Browser ausgegeben werden.

        LLAP 🖖

        --
        „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
    2. @@Connie

      Aber warum sollte man eine Vektorgrafik in eine Pixelgrafik umwandeln wollen?

      Damit ich diese Grafik (z.B. Banner, Wappen) in Grafikprogrammen ändern oder in andere Bilder einfügen kann.

      1. @@Connie

        Aber warum sollte man eine Vektorgrafik in eine Pixelgrafik umwandeln wollen?

        Damit ich diese Grafik (z.B. Banner, Wappen) in Grafikprogrammen ändern […] kann

        Das kannst du auch mit Verktorgrafiken. Dazu brauchst freilich Vektorgrafikprogramme. Richard erwähnte bereits Illustrator und Inkscape.

        Das gewünschte Ergebnis (das sollte bei Icons o.ä. eine Vektorgrafik sein) sollte die Auswahl der Werkzeuge bestimmen; nicht die ausgewählten Werkzeuge das damit nur noch zu erzielende Ergbnis.

        oder in andere Bilder einfügen kann.

        Kann man nicht in Photoshop auch Vektorgrafiken einfügen (die dann als Pixelgrafik gerastert werden)?

        LLAP 🖖

        --
        „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
  2. Hallo,

    Wie kann ich aus diesem HTML und CSS eine Grafikdatei png o.ä. erzeugen und abspeichern?

    Erster Gedanke: Screenshot. Ansonsten werden Konvertierprogramme nach dem Schema von2nach benannt. In deinem Fall also svg2png.

    Gruß
    Kalk

    1. Erster Gedanke: Screenshot. Ansonsten werden Konvertierprogramme nach dem Schema von2nach benannt. In deinem Fall also svg2png.

      Was wäre aber die Eingabe in ein derartiges Konvertierprogramm? Vorliegen habe ich eine HTML- und eine CSS-Datei.

      1. Hallo,

        Was wäre aber die Eingabe in ein derartiges Konvertierprogramm?

        Das sollte dir die Bedienungsanleitung eines derartigen Programms erzählen können.

        Gruß
        Kalk

        1. Bisher habe ich nur Programme gefunden, die als Eingabe SVG-Dateien erwarten, aber keine HTML und CSS-Dateien.

          1. Hallo Connie

            Bisher habe ich nur Programme gefunden, die als Eingabe SVG-Dateien erwarten, aber keine HTML und CSS-Dateien.

            Die SVG-Datei befindet sich im HTML-Code, du kannst sie von dort kopieren. Falls sie verlinkt ist, kannst du sie aufrufen. Bei einer SVG-Datei handelt es sich um XML-Code. Einfacher dürfte es sein, die SVG-Grafik aus dem Browser heraus wie jede Grafik zu speichern.

            Die gespeicherte SVG-Grafik kannst du dann in Adobe-Illustrator öffnen und in dein gewünschtes Format konvertieren oder auch nach Wunsch bearbeiten. Alternativ geht das z.B. auch mit Inkscape. Dabei können aber bestimmte Möglichkeiten von SVG verloren gehen - etwa Animationen und Transformationen.

            Mit besten Grüssen
            Richard