Wie bearbeitet man Vektor-Grafiken am "leichtesten"?

Mira_Belle

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!

XML

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="50" height="50" viewBox="0 0 50 50" xml:space="preserve">
<desc>Created with Fabric.js 5.2.4</desc>
<defs>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="transparent"></rect>
<g transform="matrix(Infinity NaN NaN Infinity 0 0)" id="b4d63028-df2f-4485-ba91-4b29dc8302cb"  >
</g>
<g transform="matrix(1 0 0 1 25 25)" id="be505d63-8174-4017-ac37-5a7a0f4a152f"  >
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;" vector-effect="non-scaling-stroke"  x="-25" y="-25" rx="0" ry="0" width="50" height="50" />
</g>
<g transform="matrix(0.03 0 0 0.03 73.39 74.39)"  >
<g style="opacity: 0.96;" vector-effect="non-scaling-stroke"   >
        <g transform="matrix(1 0 0 1 0 0)"  >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,165,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-8, -8)" d="M 8.628 16 L 7.378 16 C 6.653871241305594 15.997651526054023 6.017883641485848 15.518421433232103 5.816 14.823 L 5.41 13.409 C 5.138481886619421 13.273812300750176 4.877718970727758 13.11802317407644 4.630000000000001 12.943000000000001 L 3.182 13.303 C 2.479045361459086 13.475091713951835 1.7467140805739076 13.163677911907833 1.383 12.538 L 0.758 11.456 C 0.401014372075925 10.83208653974506 0.49398713793328597 10.048110946423819 0.9869999999999997 9.524999999999999 L 2.032 8.424 C 2.0121711837314695 8.283507849462174 2.001482048846029 8.14187681223009 2 8 C 2 7.847 2.014 7.698 2.032 7.55 L 0.999 6.479 C 0.4977548756271851 5.956891324181063 0.40082468510746616 5.1667880905329335 0.7609999999999998 4.539 L 1.3860000000000001 3.4559999999999995 C 1.7482963143270813 2.835255672641402 2.473301715710233 2.523669691520943 3.172999999999999 2.6879999999999997 L 4.65 3.0429999999999997 C 4.908 2.864 5.16 2.7139999999999995 5.4110000000000005 2.5909999999999997 L 5.817 1.1769999999999998 C 6.01820239276525 0.4815352588307442 6.654018589174306 0.0021274028579967297 7.378 -2.220446049250313e-16 L 8.628 0 C 9.342 0 9.982 0.478 10.187 1.163 L 10.612 2.599 C 10.854 2.72 11.096 2.865 11.351 3.043 L 12.829 2.688 C 13.52840795475845 2.523811925697842 14.253052340852141 2.8354171264368992 14.615 3.4559999999999995 L 15.24 4.539000000000001 C 15.6 5.164000000000001 15.503 5.961 15.003 6.48 L 13.968 7.550000000000001 C 13.986 7.698 14 7.847 14 8 C 14 8.145 13.986 8.285 13.969 8.424 L 15.014 9.524999999999999 C 15.506 10.043999999999999 15.6 10.836999999999998 15.242999999999999 11.456 L 14.617999999999999 12.539 C 14.254333534835828 13.165244702277317 13.521097765937713 13.476462550854071 12.817999999999998 13.302999999999999 L 11.370999999999999 12.943 C 11.111999999999998 13.125 10.860999999999999 13.276 10.611999999999998 13.401 L 10.186999999999998 14.838 C 9.978292350826473 15.525239353165166 9.346222462914554 15.996352380588933 8.628 16 z M 4.612 11.658999999999999 L 5.140000000000001 11.767999999999999 C 5.456400584981507 12.016120005561461 5.803209018246876 12.222793635850417 6.171999999999999 12.383 L 6.531000000000001 12.786999999999999 L 7.016000000000001 14.478 C 7.062000000000001 14.638 7.210000000000001 14.749 7.376000000000001 14.749 L 8.626000000000001 14.749 C 8.792577493182412 14.750372468190584 8.939532957019885 14.64025820698646 8.985000000000001 14.48 L 9.491000000000001 12.773 L 9.846000000000002 12.375 C 10.170000000000002 12.238 10.491000000000001 12.045 10.856000000000002 11.767 L 11.385000000000002 11.658 L 13.116000000000001 12.088999999999999 C 13.278326561656323 12.128744835774407 13.447486580105025 12.057177135661496 13.532000000000002 11.912999999999998 L 14.157000000000002 10.829999999999998 C 14.2391457847728 10.685816184973142 14.217648766655838 10.50491674949834 14.104000000000001 10.383999999999999 L 12.854000000000001 9.066999999999998 L 12.687000000000001 8.561999999999998 L 12.709000000000001 8.387999999999998 C 12.730000000000002 8.260999999999997 12.750000000000002 8.132999999999997 12.750000000000002 7.999999999999998 C 12.750000000000002 7.850999999999998 12.729000000000001 7.706999999999998 12.708000000000002 7.562999999999998 L 12.687000000000001 7.412999999999998 L 12.858 6.899999999999998 L 14.102 5.610999999999998 C 14.21726447444639 5.49020281125788 14.23962191726694 5.308091277010494 14.157 5.162999999999998 L 13.532 4.080999999999998 C 13.447822427158654 3.93862369466206 13.281218752024202 3.8670488148106092 13.12 3.9039999999999977 L 11.361999999999998 4.325999999999998 L 10.840999999999998 4.217999999999998 C 10.536353301217334 3.9799966152402124 10.203505649325216 3.780489546396703 9.849999999999998 3.6239999999999988 L 9.493999999999998 3.225999999999998 L 8.987999999999998 1.5189999999999981 C 8.941546874261999 1.3589939530503066 8.794610888425652 1.249200119189258 8.627999999999998 1.2499999999999982 L 7.377999999999998 1.2499999999999982 C 7.211277992934198 1.2507927676922073 7.064875389832161 1.3610013939162409 7.017999999999998 1.5209999999999981 L 6.531999999999998 3.211999999999998 L 6.171999999999998 3.616999999999998 C 5.810567074372635 3.773843463390938 5.470242225681195 3.9754179048666165 5.158999999999997 4.216999999999998 L 4.637999999999998 4.325999999999998 L 2.8809999999999985 3.9039999999999977 C 2.7195499784558925 3.8675651722630464 2.5529610016691757 3.938960448028782 2.4679999999999986 4.080999999999998 L 1.8429999999999986 5.163999999999998 C 1.7598563700115273 5.3086451171262805 1.782272180735227 5.490824524280714 1.8979999999999986 5.610999999999998 L 3.142 6.9 L 3.3129999999999997 7.414000000000001 L 3.292 7.564000000000001 C 3.267327096388616 7.708106741060273 3.2532892108915474 7.8538333619346075 3.2500000000000004 8.000000000000002 C 3.25 8.133 3.27 8.261 3.287 8.389 L 3.3089999999999997 8.562999999999999 L 3.142 9.068 L 1.892 10.385 C 1.7789655256495247 10.506202487713916 1.7575183648418113 10.68668236922788 1.839 10.831 L 2.464 11.914 C 2.548843996380964 12.057240798703292 2.7170483092140705 12.128575639808416 2.879 12.09 L 4.612 11.659 z" stroke-linecap="round" />
</g>
        <g transform="matrix(1 0 0 1 0 0)"  >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,165,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-8, -8)" d="M 8 6.25 C 8.965 6.25 9.75 7.035 9.75 8 C 9.75 8.965 8.965 9.75 8 9.75 C 7.035 9.75 6.25 8.965 6.25 8 C 6.25 7.035 7.035 6.25 8 6.25 M 8 5 C 6.34314575050762 5 5 6.34314575050762 5 8 C 5 9.65685424949238 6.34314575050762 11 8 11 C 9.65685424949238 11 11 9.65685424949238 11 8 C 11 6.34314575050762 9.65685424949238 5 8 5 z" stroke-linecap="round" />
</g>
</g>
</g>
<g transform="matrix(2.49 0 0 2.49 25 25)"  >
<g style="" vector-effect="non-scaling-stroke"   >
        <g transform="matrix(1 0 0 1 0 0)"  >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,165,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-8, -8)" d="M 8.628 16 L 7.378 16 C 6.653871241305594 15.997651526054023 6.017883641485848 15.518421433232103 5.816 14.823 L 5.41 13.409 C 5.138481886619421 13.273812300750176 4.877718970727758 13.11802317407644 4.630000000000001 12.943000000000001 L 3.182 13.303 C 2.479045361459086 13.475091713951835 1.7467140805739076 13.163677911907833 1.383 12.538 L 0.758 11.456 C 0.401014372075925 10.83208653974506 0.49398713793328597 10.048110946423819 0.9869999999999997 9.524999999999999 L 2.032 8.424 C 2.0121711837314695 8.283507849462174 2.001482048846029 8.14187681223009 2 8 C 2 7.847 2.014 7.698 2.032 7.55 L 0.999 6.479 C 0.4977548756271851 5.956891324181063 0.40082468510746616 5.1667880905329335 0.7609999999999998 4.539 L 1.3860000000000001 3.4559999999999995 C 1.7482963143270813 2.835255672641402 2.473301715710233 2.523669691520943 3.172999999999999 2.6879999999999997 L 4.65 3.0429999999999997 C 4.908 2.864 5.16 2.7139999999999995 5.4110000000000005 2.5909999999999997 L 5.817 1.1769999999999998 C 6.01820239276525 0.4815352588307442 6.654018589174306 0.0021274028579967297 7.378 -2.220446049250313e-16 L 8.628 0 C 9.342 0 9.982 0.478 10.187 1.163 L 10.612 2.599 C 10.854 2.72 11.096 2.865 11.351 3.043 L 12.829 2.688 C 13.52840795475845 2.523811925697842 14.253052340852141 2.8354171264368992 14.615 3.4559999999999995 L 15.24 4.539000000000001 C 15.6 5.164000000000001 15.503 5.961 15.003 6.48 L 13.968 7.550000000000001 C 13.986 7.698 14 7.847 14 8 C 14 8.145 13.986 8.285 13.969 8.424 L 15.014 9.524999999999999 C 15.506 10.043999999999999 15.6 10.836999999999998 15.242999999999999 11.456 L 14.617999999999999 12.539 C 14.254333534835828 13.165244702277317 13.521097765937713 13.476462550854071 12.817999999999998 13.302999999999999 L 11.370999999999999 12.943 C 11.111999999999998 13.125 10.860999999999999 13.276 10.611999999999998 13.401 L 10.186999999999998 14.838 C 9.978292350826473 15.525239353165166 9.346222462914554 15.996352380588933 8.628 16 z M 4.612 11.658999999999999 L 5.140000000000001 11.767999999999999 C 5.456400584981507 12.016120005561461 5.803209018246876 12.222793635850417 6.171999999999999 12.383 L 6.531000000000001 12.786999999999999 L 7.016000000000001 14.478 C 7.062000000000001 14.638 7.210000000000001 14.749 7.376000000000001 14.749 L 8.626000000000001 14.749 C 8.792577493182412 14.750372468190584 8.939532957019885 14.64025820698646 8.985000000000001 14.48 L 9.491000000000001 12.773 L 9.846000000000002 12.375 C 10.170000000000002 12.238 10.491000000000001 12.045 10.856000000000002 11.767 L 11.385000000000002 11.658 L 13.116000000000001 12.088999999999999 C 13.278326561656323 12.128744835774407 13.447486580105025 12.057177135661496 13.532000000000002 11.912999999999998 L 14.157000000000002 10.829999999999998 C 14.2391457847728 10.685816184973142 14.217648766655838 10.50491674949834 14.104000000000001 10.383999999999999 L 12.854000000000001 9.066999999999998 L 12.687000000000001 8.561999999999998 L 12.709000000000001 8.387999999999998 C 12.730000000000002 8.260999999999997 12.750000000000002 8.132999999999997 12.750000000000002 7.999999999999998 C 12.750000000000002 7.850999999999998 12.729000000000001 7.706999999999998 12.708000000000002 7.562999999999998 L 12.687000000000001 7.412999999999998 L 12.858 6.899999999999998 L 14.102 5.610999999999998 C 14.21726447444639 5.49020281125788 14.23962191726694 5.308091277010494 14.157 5.162999999999998 L 13.532 4.080999999999998 C 13.447822427158654 3.93862369466206 13.281218752024202 3.8670488148106092 13.12 3.9039999999999977 L 11.361999999999998 4.325999999999998 L 10.840999999999998 4.217999999999998 C 10.536353301217334 3.9799966152402124 10.203505649325216 3.780489546396703 9.849999999999998 3.6239999999999988 L 9.493999999999998 3.225999999999998 L 8.987999999999998 1.5189999999999981 C 8.941546874261999 1.3589939530503066 8.794610888425652 1.249200119189258 8.627999999999998 1.2499999999999982 L 7.377999999999998 1.2499999999999982 C 7.211277992934198 1.2507927676922073 7.064875389832161 1.3610013939162409 7.017999999999998 1.5209999999999981 L 6.531999999999998 3.211999999999998 L 6.171999999999998 3.616999999999998 C 5.810567074372635 3.773843463390938 5.470242225681195 3.9754179048666165 5.158999999999997 4.216999999999998 L 4.637999999999998 4.325999999999998 L 2.8809999999999985 3.9039999999999977 C 2.7195499784558925 3.8675651722630464 2.5529610016691757 3.938960448028782 2.4679999999999986 4.080999999999998 L 1.8429999999999986 5.163999999999998 C 1.7598563700115273 5.3086451171262805 1.782272180735227 5.490824524280714 1.8979999999999986 5.610999999999998 L 3.142 6.9 L 3.3129999999999997 7.414000000000001 L 3.292 7.564000000000001 C 3.267327096388616 7.708106741060273 3.2532892108915474 7.8538333619346075 3.2500000000000004 8.000000000000002 C 3.25 8.133 3.27 8.261 3.287 8.389 L 3.3089999999999997 8.562999999999999 L 3.142 9.068 L 1.892 10.385 C 1.7789655256495247 10.506202487713916 1.7575183648418113 10.68668236922788 1.839 10.831 L 2.464 11.914 C 2.548843996380964 12.057240798703292 2.7170483092140705 12.128575639808416 2.879 12.09 L 4.612 11.659 z" stroke-linecap="round" />
</g>
        <g transform="matrix(1 0 0 1 0 0)"  >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,165,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-8, -8)" d="M 8 6.25 C 8.965 6.25 9.75 7.035 9.75 8 C 9.75 8.965 8.965 9.75 8 9.75 C 7.035 9.75 6.25 8.965 6.25 8 C 6.25 7.035 7.035 6.25 8 6.25 M 8 5 C 6.34314575050762 5 5 6.34314575050762 5 8 C 5 9.65685424949238 6.34314575050762 11 8 11 C 9.65685424949238 11 11 9.65685424949238 11 8 C 11 6.34314575050762 9.65685424949238 5 8 5 z" stroke-linecap="round" />
</g>
</g>
</g>
</svg>

Alles anzeigen

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?

Mitleser

Mit Win kann ich nicht dienen, aber hier die Vorschau auf Lin mit Nemo:

Sören Hentzschel

Zitat von Mira_Belle

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.

Zitat von Mira_Belle

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.

Zitat von Mira_Belle

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“.

omar1979

Zitat von Mira_Belle

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.

Mitleser

Zitat von Mira_Belle

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>

Mira_Belle

Zitat von Mitleser

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>

Mitleser

Zitat von Mira_Belle

Nein, so nicht,

So, so!

Ist ja sehr merkwürdig...

Funktioniert hier bestens!

Mira_Belle

Zitat von Mitleser

So, so!
...

🤔

Ist mir irgendwie egal, Hauptsache es funktioniert!

Du hast da aber ein Symbol,

hier ganz rechts, oben, in Rot, kaum noch zu erkennen.

Das kann ich nirgends finden.

Kannst Du es mir bitte rauf laden?

Mitleser

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...

Mitleser

Zitat von Mira_Belle

hier ganz rechts, oben, in Rot, kaum noch zu erkennen.
Das kann ich nirgends finden.
Kannst Du es mir bitte rauf laden?

ReloadButton.zip

Edit

Noch besser, hier ist die Quelle:

"synchronization" - iconmonstr

Mira_Belle

Mitleser

Danke

.DeJaVu

Für SVG Online, narrensicher

https://www.drawsvg.org/drawsvg.html

Für Einfügen: Document > New > Open > Code

Für Experten

SVG Editor/Viewer Online

Speravir

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

Zitat von Speravir

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.

Mitleser

Mira_Belle

Nur mal so nebenbei, bei deinem Icon aus:

Zitat von Mira_Belle

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:

XML

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="16" height="16" viewBox="0 0 16 16" xml:space="preserve">
<desc>Created with Fabric.js 5.2.4</desc>
<defs>
</defs>
<g transform="matrix(1 0 0 1 8 8)" id="f7ccb41e-0f1e-4a0a-b24a-cd5290fc41da"  >
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;" vector-effect="non-scaling-stroke"  x="-8" y="-8" rx="0" ry="0" width="16" height="16" />
</g>
<g transform="matrix(Infinity NaN NaN Infinity 0 0)" id="7ad56bc3-4418-4e4e-8c98-15f3df2e9cae"  >
</g>
<g transform="matrix(0.01 0 0 0.01 25.04 25.36)"  >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-11.5, -8.5)" d="M 8 6 C 8 6 8 2 11.5 2 C 15 2 15 5 15 6 C 15 10.5 8 15 8 15 z" stroke-linecap="round" />
</g>
<g transform="matrix(0.23 0 0 0.2 9.63 9.86)"  >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-5, -8.5)" d="M 8 6 C 8 6 8 2 4.5 2 C 1 2 1 5 1 6 C 1 10.5 8 15 8 15 L 9 9 z" stroke-linecap="round" />
</g>
<g transform="matrix(0.32 0 0 0.32 10.65 9.86)"  >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-11.5, -8.5)" d="M 8 6 C 8 6 8 2 11.5 2 C 15 2 15 5 15 6 C 15 10.5 8 15 8 15 z" stroke-linecap="round" />
</g>
<g transform="matrix(0.32 0 0 0.32 8.19 8.62)"  >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-5, -8.5)" d="M 8 6 C 8 6 8 2 4.5 2 C 1 2 1 5 1 6 C 1 10.5 8 15 8 15 L 9 9 z" stroke-linecap="round" />
</g>
<g transform="matrix(1 0 0 1 8 8)"  >
<g style="" vector-effect="non-scaling-stroke"   >
        <g transform="matrix(1 0 0 1 3.5 0)"  >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,21,21); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-11.5, -8.5)" d="M 8 6 C 8 6 8 2 11.5 2 C 15 2 15 5 15 6 C 15 10.5 8 15 8 15 z" stroke-linecap="round" />
</g>
        <g transform="matrix(1 0 0 1 -3 0)"  >
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,21,21); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-5, -8.5)" d="M 8 6 C 8 6 8 2 4.5 2 C 1 2 1 5 1 6 C 1 10.5 8 15 8 15 L 9 9 z" stroke-linecap="round" />
</g>
</g>
</g>
</svg>

Alles anzeigen

Mira_Belle

Zitat von Mitleser
Mira_Belle
Nur mal so nebenbei, bei deinem Icon aus:

Zitat von Mira_Belle

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 ...
</svg>
anstatt:
XML
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg ...
</svg>
Alles anzeigen

Jetzt brat mir einer doch en Storch.

Wie machst Du das?

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

Speravir

Zitat von Mira_Belle

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.

Mitleser

@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>

Mira_Belle

Zitat von Speravir

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.

Mitleser

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.....

Wie bearbeitet man Vektor-Grafiken am "leichtesten"?

Mira_Belle 14. August 2023 um 19:33

Ähnliche Themen

Unveränderbares Profil mit Voreinstellungen für Deployment auf vielen PCs