SVG Grafik selber erstellen?

    Hallo @all..

    nur mal so als Info für mich, man lernt ja gerne dazu :wink:

    Grafiken gibt es ja mit den unterscheidlichsten Dateiendungen.
    Wie kann man z.B. eine SVG Grafik selber erstellen, bzw. kann man auch eine vorhandene .png Grafik umwandeln zu SVG?

    Und was ist der Unterschied zwischen:

    Code
    listStyleImage = 'url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><path fill="red" d="M8 6a1 1 0 0 0 1-1V1a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1zm3.5-4.032a1 1 0 0 0-1 1.732A4.946 4.946 0 0 1 13 8 5 5 0 0 1 3 8a4.946 4.946 0 0 1 2.5-4.3 1 1 0 0 0-1-1.732 7 7 0 1 0 7.006 0z"></path></svg>\')

    und dieser Bezeichnung?

    Code
    list-style-image: url(chrome://browser/skin/quit.svg);

    Bzw. wann wird welche benutzt?

    Für jegliche Hilfe wie immer herzlichen Dank vorweg.

    Hallo,

    ich verwende zur Erstellung von SVG-Grafiken Adobe Illustrator:

    [attachment=0]Bildschirmfoto 2018-01-15 um 12.03.26.png[/attachment]

    Kostet allerdings auch als Einzelanwendung im Jahres-Abo 24 Euro pro Monat. Es gibt auch kostenlose Programme zur Erstellung von SVG-Grafiken. Da kann ich aber keine Empfehlungen machen, da ich mich mit den kostenlosen Alternativen nie befasst habe.

    PNG-Dateien umwandeln in SVG - grundsätzlich ja, es gibt auch Online-Tools. Das funktioniert aber nicht für jede Grafik gut und ist auch nicht immer sinnvoll. Bedenke, dass es bei SVG vs. PNG nicht nur um ein anderes Format mit anderen Kompressions-Eigenschaften geht, es ist ein komplett anderes Format. PNG-Grafiken sind Pixelgrafiken, d.h. jeder Pixel besteht aus Farbinformationen für Rot, Grün, Blau und Transparenz, SVG-Grafiken dagegen sind Vektor-Grafiken und damit im Endeffekt mathematische Formeln. SVG ist ein super Format für einfache Formen, aber du kannst aus einer Grafik mit vielen Details keine sinnvolle SVG-Grafik erstellen.

    Also der Unterschied ist der bei deinem ersten Beispiel ist die komplette Datei im Script enthalten.
    Bei Beispiel 2 muss die Datei auf deinem Computer existieren.
    Gib einfach mal in deine Adresszeile den Pfad wie folgt ein: chrome://browser/skin/quit.svg

    Erstellen kannst du SVG z.B. mit Inkscape. Such mal nach InkscapePortable zum testen.
    Bin da auch erst seit kurzem am basteln....

    Kleinere SVG-Grafiken erstellt man am besten von Hand mit einem Texteditor. Das erzeugt am wenigsten Overhead, ist kommentierbar und man findet sich auch nächtes Jahr noch zurecht um etwas zu ändern. Ich habe einige Schaltpläne so von Hand erstellt, z.B. hier: http://www.thestorff.de/wohnmobil-elektrik.php#allgemein (etwas runterscrollen). Nun mache ich das ja nicht berufsmäßig, also darf ich auch etwas länger dazu brauchen. Im Seitenquelltext ist der Quellcode direkt lesbar, einfach suchen nach "<svg". Da ist nichts geheimnisvolles bei, das ist leichter als Javascript.

    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE

    Zitat von 2002Andreas


    Wie kann man z.B. eine SVG Grafik selber erstellen, bzw. kann man auch eine vorhandene .png Grafik umwandeln zu SVG?


    Es gibt Online-Bildkonverter. Einfach mal googeln. Inwieweit die etwas taugen, kann ich dir nicht beantworten.

    Google-Ergebnisse

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

    Zitat von HT-Frogger


    Kleinere SVG-Grafiken erstellt man am besten von Hand mit einem Texteditor. Das erzeugt am wenigsten Overhead, ist kommentierbar und man findet sich auch nächtes Jahr noch zurecht um etwas zu ändern.

    Was bedeutet "Overhead" in diesem Zusammenhang?

    Auf jeden Fall interessant. 2002Andreas hatte eingangs diesen Code gepostet:

    Code
    <path fill="red" d="M8 6a1 1 0 0 0 1-1V1a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1zm3.5-4.032a1 1 0 0 0-1 1.732A4.946 4.946 0 0 1 13 8 5 5 0 0 1 3 8a4.946 4.946 0 0 1 2.5-4.3 1 1 0 0 0-1-1.732 7 7 0 1 0 7.006 0z"></path>

    Wenn ich das Kapitel über SVG-Pfade auf SELFHTML richtig verstehe, könnte man das aufdröseln in:
    M8 6 (oder M8,1): Startpunkt, wobei "M" das Kommando ist.
    a1 1: Kreisbogen mit Radius "1", wobei a das Kommando ist.
    0: Keine x-Achsen-Rotation.
    0: ein Bogen mit weniger als 180 Grad wird gezeichnet.
    0: Der Bogen wird mit einer negativen Richtung gezeichnet.
    0-1 (oder 0,-1): Endpunkt.
    u. s. w.

    Und den ganzen Pfad könnte man jetzt in mehrere solcher Teilstücke aufteilen, oder? Entweder um die Übersicht zu erhöhen, oder um die Farbe eines Teilstücks zu ändern?

    Buchstaben sind anscheinend immer Kommandos. Kommas müssen nicht gesetzt werden, sondern dienen nur der Übersicht. Und das Minuszeichen bedeutet nicht etwa eine Strecke, sondern tatsächlich ein Minus, wobei vor ein Minus kein Leerzeichen oder Komma gesetzt werden muss.

    Aber ich kann mir gut vorstellen, dass es bei sehr einfachen Formen praktisch ist, das Ganze händisch zu machen. Da muss man aber schon Zeit und eine gehörige Portion Vorstellungsvermögen mitbringen, oder nicht?

    Einmal editiert, zuletzt von Anonymous (17. Januar 2018 um 19:49)

    Danke Sören, das Tool kannte ich noch nicht. Aber bei meinem ersten Plan sind es gerade mal 22% Einsparung. Das meiste davon natürlich Kommentare und Zeilenumbrüche. Bei von Programmen erstelltem Code wird es sicherlich mehr sein. Ist aber schon interessant das mal zu testen.

    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE

    Overhead - da gibt es viel, zum Beispiel den Progammnamen und solche unwichtigen Dinge.

    Aber ein echtes Beispiel:
    Man kann bei jedem noch so kleinen Punkt oder Strich die Farben mit angeben (Strichfarbe, Füllfarbe), so machen es die Programme. Man kann auch die Elemente je nach Farbe in Blöcken zusammenfassen und die Farbe dann nur einmal definieren, das ist dann optimiert. Da gibt es noch mehr ähnlich Dinge. Und vor allem bleibt der Code bei Handoptimierung gut lesbar und ist wartungsfreundlich, so liebe ich Code...

    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE

    Das kannte ich bisher nicht. Der erzeugte Code ist aber übersichtlich und kann leicht optimiert werden. Gerade für kompliziertere Kurven ist es nützlich, man braucht dann nicht so oft "nachzuschlagen".

    Danke für das nicht darauf hinweisen :klasse: Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE