Wie bearbeitet man Vektor-Grafiken am "leichtesten"?

  • Kurz, es geht um Dateien mit der Endung *svg

    Ich habe mir nun so einige Grafiken per Visual Studio Code angeschaut.

    Das für mich erschreckende, alle sind so unterschiedlich, dass ich einfach nicht verstehe,

    wie ich z.B. die Farbe, die Größe usw. festlegen kann.

    Manche Grafiken werden im Explorer angezeigt, andere wiederum nicht.

    Manchen Grafiken kann ich per CSS-Code dann im Firefox eine Farbe zuweisen, andere nicht.

    Ich poste hier mal einige Beispiele.

    Dieses Symbol wird nicht im Explorer angezeigt, der Firefox aber schon.

    XML
    <!-- This Source Code Form is subject to the terms of the Mozilla Public
       - License, v. 2.0. If a copy of the MPL was not distributed with this
       - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity"><path d="M10.98.574a1 1 0 0 0-.746 1.856A6.034 6.034 0 1 1 3 4.721V6a.5.5 0 0 0 1 0V2.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0 0 1h1.262A8 8 0 1 0 10.98.574z"/><path d="M6.494 12.137l5.672-3.274a1 1 0 0 0 0-1.726L6.494 3.863A1 1 0 0 0 5 4.726v6.548a1 1 0 0 0 1.494.863z"/></svg>

    Nächstes, das wird im Explorer angezeigt! Warum dieses, aber das davor nicht?

    XML
    <!-- This Source Code Form is subject to the terms of the Mozilla Public
       - License, v. 2.0. If a copy of the MPL was not distributed with this
       - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle fill="context-fill" cx="8" cy="2" r="2"/><path fill="context-fill" d="M14.1 4.5H2c-.6 0-1 .4-1 1s.4 1 1 1h3.5v8.4c0 .6.4 1.1 1 1.1s1-.5 1-1.1v-4.1h1v4.1c0 .6.4 1.1 1 1.1s1-.5 1-1.1V6.4H14c.6 0 1-.4 1-1s-.4-.9-.9-.9z"/></svg>

    Kommen wir zu "originalen" Grafiken von Mozilla.

    Dieses Symbol wird im Explorer nicht angezeigt, Firefox zeigt es und es kann per CSS-Code "gefärbt" werden.

    XML
    <!-- This Source Code Form is subject to the terms of the Mozilla Public
       - License, v. 2.0. If a copy of the MPL was not distributed with this
       - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle fill="context-fill" cx="8" cy="2" r="2"/><path fill="context-fill" d="M14.1 4.5H2c-.6 0-1 .4-1 1s.4 1 1 1h3.5v8.4c0 .6.4 1.1 1 1.1s1-.5 1-1.1v-4.1h1v4.1c0 .6.4 1.1 1 1.1s1-.5 1-1.1V6.4H14c.6 0 1-.4 1-1s-.4-.9-.9-.9z"/></svg>

    Dann habe ich auch hier sowas!

    Aber auch so

    XML
    <?xml version="1.0"?>
    <svg width="640" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
     <!--! Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
    
     <g class="layer">
      <title>Layer 1</title>
      <path d="m95,129a128,128 0 1 1 256,0a128,128 0 1 1 -256,0zm-96,354.3c0,-98.5 79.8,-178.3 178.3,-178.3l91.4,0c98.5,0 178.3,79.8 178.3,178.3c0,16.4 -13.3,29.7 -29.7,29.7l-388.6,0c-16.4,0 -29.7,-13.3 -29.7,-29.7zm609.3,29.7l-137.9,0c5.4,-9.4 8.6,-20.3 8.6,-32l0,-8c0,-60.7 -27.1,-115.2 -69.8,-151.8c2.4,-0.1 4.7,-0.2 7.1,-0.2l61.4,0c89.1,0 161.3,72.2 161.3,161.3c0,17 -13.8,30.7 -30.7,30.7zm-177.3,-256c-31,0 -59,-12.6 -79.3,-32.9c19.7,-26.6 31.3,-59.5 31.3,-95.1c0,-26.8 -6.6,-52.1 -18.3,-74.3c18.6,-13.6 41.5,-21.7 66.3,-21.7c61.9,0 112,50.1 112,112s-50.1,112 -112,112z" fill="#e0e0e0" id="svg_1"/>
     </g>
    </svg>

    Und

    XML
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM609.3 512H471.4c5.4-9.4 8.6-20.3 8.6-32v-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2h61.4C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z"/></svg>

    Letzte beiden sind im Übrigen die gleichen Symbole, aber unteres ist das "originale", schwarz und leider nicht per CSS-Code einfärbbar,

    darüber der Code den mit Inkscape ausgepuckt hat, nach dem ich das Symbol "hellgrau" eingefärbt hatte.

    Wie kann das sein, dass da bei der Erstellung von Vektorgrafiken ein jeder irgendwie sein eigenes Süppchen kocht?

    Mit <3lichem Gruß

    Mira

  • Wie bearbeitet man Verktor-Grafigen am "Leichtesten"?

    Der übliche Weg wäre wohl über ein Vektorgraphikprogramm. Ich arbeite mit dem Adobe Illustrator. Das Programm ist aber kostenpflichtig. Eine bekannte kostenlose Option ist Inkscape, was du selbst schon genannt hast.

    Dieses Symbol wird im Explorer nicht angezeigt

    Ich weiß nicht, was Windows für Anforderungen hat. Der Finder (das macOS-Pendant zum Explorer) hat keine Probleme, das anzuzeigen.

    Wie kann das sein, dass da bei der Erstellung von Vektorgrafiken ein jeder irgendwie sein eigenes Süppchen kocht?

    Das ist wie die Frage: Wieso sieht der Quellcode jeder Website anders aus? Wie HTML ist auch SVG ein Standard, der viele Features besitzt. Es hängt vom Entwickler / Designer ab, welche Features genutzt werden. Aber wie gesagt: Standard, also kein „eigenes Süppchen“.

  • unteres ist das "originale", schwarz und leider nicht per CSS-Code einfärbbar,

    Ich konnte da die Farbe in Rot einfärben da musst du falls andere Farbe willst das #ae1919 umändern.

    Code
    <svg enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g fill="#ae1919">
    <path d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM609.3 512H471.4c5.4-9.4 8.6-20.3 8.6-32v-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2h61.4C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z"/></g></svg>

    Mehr helfen kann ich leider auch nicht ausser zu testen. Sorry.

    "Klug sein hat noch nie einen Menschen an Dummheiten gehindert." Stefan Zweig
    Firefox-Version: 123.0
    Edition: Windows 11 Home (64-Bit-Betriebssystem)
    Version: 23H2

    Einmal editiert, zuletzt von omar1979 (13. August 2023 um 21:20) aus folgendem Grund: Ein Beitrag von omar1979 mit diesem Beitrag zusammengefügt.

  • Letzte beiden sind im Übrigen die gleichen Symbole, aber unteres ist das "originale", schwarz und leider nicht per CSS-Code einfärbbar

    So gehts:

    XML
    <svg enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
    <path style="stroke:none;fill-rule:nonzero;fill:context-fill;fill-opacity:context-fill-opacity;" d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM609.3 512H471.4c5.4-9.4 8.6-20.3 8.6-32v-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2h61.4C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z"/></svg>

    Ich mach mir die Welt, wie sie mir gefällt. [Pippi Langstrumpf/Astrid Lindgren]

  • So gehts:

    XML
    <svg enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
    <path style="stroke:none;fill-rule:nonzero;fill:context-fill;fill-opacity:context-fill-opacity;" d="..."/></svg>

    Nein, so nicht,

    aber so :!:

    XML
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
    <!--! Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
    <path style="stroke:none;fill-rule:nonzero;fill:context-fill;fill-opacity:context-fill-opacity;" d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM609.3 512H471.4c5.4-9.4 8.6-20.3 8.6-32v-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2h61.4C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z"/></svg>

    Mit <3lichem Gruß

    Mira

  • Einen Tipp hätte ich noch:

    Sollte der style im icon mal fehlen, wird diese Angabe beim scallieren mit diesem Onlinetool hinzugefügt, allerdings mit fill:rgb(0%,0%,0%);fill-opacity:1; :

    Online die Bildgröße mehrerer Bilder gleichzeitig ändern
    Verändern Sie kostenlos die Größen mehrerer JPG-, PNG-, SVG- oder GIF-Bilder in nur wenigen Sekunden. Durch eine Änderung der Prozent- oder Pixelvorgaben…
    www.iloveimg.com

    Mache Feierabend, Icon kommt morgen...

    Ich mach mir die Welt, wie sie mir gefällt. [Pippi Langstrumpf/Astrid Lindgren]

  • Mira_Belle, ändere bitte im Titel „Verktor-Grafigen“ zu „Vektor-Grafiken“. Und eigentlich ist auch „Leichtesten“ klein zu schreiben.

    Das schon genannte Inkscape ist eigentlich das Programm der Wahl für die SVG-Bearbeitung, wenn es um kostenlose Benutzung geht.

    Ich hätte da aber noch eine andere Online-Möglichkleit (die man sich aber theoretisch auf seinen eigenen Rechner laden können sollte): SVG-Edit: Powerful SVG-Editor for your browser. Unter I want to use SVGEdit findet man eine Online-Version (master branch sollte ausreichen).

    Und dann als Warnung omar1979 und Mitleser: Die SVG-Eigenschaft enable-background ist missbilligt (deprecated), und das seit mindestens 2014. Vergleiche The deprecated ‘enable-background’ property (w3.org) und enable-background (MDN). Die Gefahr dabei ist immer, dass es irgendwann plötzlich ohne weitere Vorwarnung nach einem Versionsupdate des Browsers nicht mehr funktioniert.

  • Mira_Belle 14. August 2023 um 19:33

    Hat den Titel des Themas von „Wie bearbeitet man Verktor-Grafigen am "Leichtesten"?“ zu „Wie bearbeitet man Vektor-Grafiken am "leichtesten"?“ geändert.
  • Mira_Belle, ändere bitte im Titel „Verktor-Grafigen“ zu „Vektor-Grafiken“. Und eigentlich ist auch „Leichtesten“ klein zu schreiben.

    Erledigt, und, man sollte nicht mitten in der Nacht ein neues Fass, äh, Thema aufmachen.

    Danke @all

    Meist geht es mir ja nur darum, eine Vektor-Grafik dazu zu überreden, einfach eine Farbe per CSS anzunehmen.
    Auch die darzustellende Größe geht ja fast immer per CSS.

    Somit ist das Editieren und einfügen von

    style="stroke:none;fill-rule:nonzero;fill:context-fill;fill-opacity:context-fill-opacity;"

    meine erste Wahl.

    Erst, wenn es unbedingt sein muss, werde ich irgendein Tool nutzen.

    Inkscape ist installiert und die online Tools sind als Lesezeichen abgespeichert.


    Mit <3lichem Gruß

    Mira

  • Mira_Belle

    Nur mal so nebenbei, bei deinem Icon aus:

    Dort müsst Ihr das Symbol, welches sich in der Zip verbirgt, hinkopieren.

    default-browser-red.zip

    sieht der 'einigermaßen bereinigte' Quelltext so aus:

    XML
    <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
    <g id="default-browser-red">
    <path style=" stroke:none;fill-rule:nonzero;fill:#ff1500;fill-opacity:1;" d="M 10.320312 9.359375 C 10.320312 9.359375 10.320312 8.558594 9.515625 8.558594 C 8.710938 8.558594 8.710938 9.160156 8.710938 9.359375 C 8.710938 10.261719 10.320312 11.160156 10.320312 11.160156 L 10.550781 9.960938 Z M 10.320312 9.359375 "/>
    <path style=" stroke:none;fill-rule:nonzero;fill:#ff1500;fill-opacity:1;" d="M 9.53125 9.058594 C 9.53125 9.058594 9.53125 7.78125 10.648438 7.78125 C 11.769531 7.78125 11.769531 8.738281 11.769531 9.058594 C 11.769531 10.5 9.53125 11.941406 9.53125 11.941406 Z M 9.53125 9.058594 "/>
    <path style=" stroke:none;fill-rule:nonzero;fill:#ff1500;fill-opacity:1;" d="M 9.148438 7.820312 C 9.148438 7.820312 9.148438 6.539062 8.03125 6.539062 C 6.910156 6.539062 6.910156 7.5 6.910156 7.820312 C 6.910156 9.261719 9.148438 10.699219 9.148438 10.699219 L 9.46875 8.78125 Z M 9.148438 7.820312 "/>
    <path style=" stroke:none;fill-rule:nonzero;fill:#ff1500;fill-opacity:1;" d="M 8 5.5 C 8 5.5 8 1.5 11.5 1.5 C 15 1.5 15 4.5 15 5.5 C 15 10 8 14.5 8 14.5 Z M 8 5.5 "/>
    <path style=" stroke:none;fill-rule:nonzero;fill:#ff1500;fill-opacity:1;" d="M 8 5.5 C 8 5.5 8 1.5 4.5 1.5 C 1 1.5 1 4.5 1 5.5 C 1 10 8 14.5 8 14.5 L 9 8.5 Z M 8 5.5 "/>
    </g>
    </svg>

    anstatt:

    Ich mach mir die Welt, wie sie mir gefällt. [Pippi Langstrumpf/Astrid Lindgren]

  • Jetzt brat mir einer doch en Storch.

    Wie machst Du das?

    Ach, und danke für das "neue", alte Symbol.

    Mit <3lichem Gruß

    Mira

  • Wie machst Du das?

    Ich weiß nicht, wie der Mitleser es gemacht hat, aber in Inkscape gibt es die sowieso zu empfehlende Möglichkeit „Speichern unter…“ und dann als Dateityp „Optimiertes SVG“ auszuwählen. Sonst wäre für produktiv eingesetzte Dateien „Normales SVG“ zu nutzen, „Inkscape-SVG“ (das ist der Standard des Programms, wenn man einfach nur auf „Speichern“ drückt) dagegen nur für die Arbeitskopie, wenn man sie erhalten will.

  • @Mira_Belle

    Und noch 'gekürzter':

    XML
    <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
    <g id="default-browser-red">
    <path style=" stroke:none;fill-rule:nonzero;fill:#ff1500;fill-opacity:1;" d="M 8 5.5 C 8 5.5 8 1.5 11.5 1.5 C 15 1.5 15 4.5 15 5.5 C 15 10 8 14.5 8 14.5 Z M 8 5.5 "/>
    <path style=" stroke:none;fill-rule:nonzero;fill:#ff1500;fill-opacity:1;" d="M 8 5.5 C 8 5.5 8 1.5 4.5 1.5 C 1 1.5 1 4.5 1 5.5 C 1 10 8 14.5 8 14.5 L 9 8.5 Z M 8 5.5 "/>
    </g>
    </svg>

    Ich mach mir die Welt, wie sie mir gefällt. [Pippi Langstrumpf/Astrid Lindgren]

  • Ich weiß nicht, wie der Mitleser es gemacht hat, aber in Inkscape gibt es die sowieso zu empfehlende Möglichkeit „Speichern unter…“ und dann als Dateityp „Optimiertes SVG“ auszuwählen. Sonst wäre für produktiv eingesetzte Dateien „Normales SVG“ zu nutzen, „Inkscape-SVG“ (das ist der Standard des Programms, wenn man einfach nur auf „Speichern“ drückt) dagegen nur für die Arbeitskopie, wenn man sie erhalten will.

    Damit bekomme ich aber den originalen Quelltext nicht so 'klein' und 'bereinigt', wie Mitleser das gemacht hat.

    Mit <3lichem Gruß

    Mira

  • Lass das Original doch mal durch die Online-Software aus Beitrag #9 laufen, das Original ist zwar schon 16x16 px, aber trotzdem mal auf 16x16 px einstellen und staunen.....

    Ich mach mir die Welt, wie sie mir gefällt. [Pippi Langstrumpf/Astrid Lindgren]