Logo als .SVG

PixelPatron

Huhu,

wie bereits angekündigt habe ich natürlich direkt mal mit Inkscape versucht meinen Schriftzug als SVG Datei zu erstellen .. und ja was soll ich sagen? Das ganze war echt total easy und ich musste mich fast nicht anstrengen.

Nur die Frage die ich jetzt habe .. ich habe hier diesen Schnipsel .. habe ich jetzt die Möglichkeit die Farben der einzelnen Buchstaben anzupassen? Wäre es eher sinnvoll nicht jeden buchstaben in pfaden zu speichern sondern das ganze als wort?

Spoiler anzeigen

XML

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="198.47285mm"
   height="86.832619mm"
   viewBox="0 0 198.47285 86.832619"
   version="1.1"
   id="svg1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs1" />
  <g
     id="layer1"
     transform="translate(35.418896,-142.39011)">
    <path
       style="font-size:123.472px;font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue';fill:#ffffff;stroke-width:0.264583"
       d="M -35.418899,142.69877 H 1.6227013 v 12.3472 H -21.836979 v 22.84232 h 18.6442723 v 12.3472 H -21.836979 v 26.54648 H 1.6227013 v 12.3472 H -35.418899 Z"
       id="text1"
       aria-label="e" />
    <path
       d="M -12.164799,142.79232 H 1.5405926 l 8.8899844,67.04529 h 0.246944 l 8.889984,-67.04529 h 12.470672 l -13.088032,86.4304 H 0.92323263 Z"
       id="text2"
       style="font-size:123.472px;font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue';fill:#ffffff;stroke-width:0.264583"
       aria-label="v" />
    <path
       d="m 20.978052,142.79495 18.396329,-0.19136 14.975756,86.11623 -13.581182,0.14127 -2.648162,-17.1036 0.0026,0.24646 -15.433162,0.16054 -2.293024,16.90852 -12.5934585,0.13099 z m 15.418026,57.51862 -6.495008,-42.57546 -0.246931,0.003 -5.481125,42.70003 z"
       id="text3"
       style="font-size:123.472px;font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue';fill:#ffffff;stroke-width:0.264333"
       aria-label="a" />
    <path
       d="m 45.014438,142.43418 h 20.125936 q 10.49512,0 15.310528,4.93888 4.815408,4.81541 4.815408,14.94011 v 5.3093 q 0,13.45845 -8.889984,17.03913 v 0.24695 q 4.93888,1.48166 6.914432,6.05013 2.099024,4.56846 2.099024,12.22372 v 15.18706 q 0,3.70416 0.246944,6.05013 0.246944,2.22249 1.23472,4.44499 H 73.042582 q -0.740832,-2.09902 -0.987776,-3.9511 -0.246944,-1.85208 -0.246944,-6.66749 v -15.80442 q 0,-5.92665 -1.975552,-8.27262 -1.85208,-2.34597 -6.544016,-2.34597 h -4.691936 v 37.0416 h -13.58192 z m 18.5208,37.0416 q 4.074576,0 6.050128,-2.09902 2.099024,-2.09903 2.099024,-7.03791 v -6.66749 q 0,-4.69193 -1.728608,-6.79096 -1.605136,-2.09902 -5.185824,-2.09902 h -6.1736 v 24.6944 z"
       id="text4"
       style="font-size:123.472px;font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue';fill:#ffffff;stroke-width:0.264583"
       aria-label="r" />
    <path
       d="m 84.966506,142.43418 h 13.581893 v 86.4304 H 84.966506 Z"
       id="text5"
       style="font-size:123.472px;font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue';fill:#ffffff;stroke-width:0.264583"
       aria-label="i" />
    <path
       d="m 114.38812,228.77638 q -10.00123,0 -15.310514,-5.51912 -5.30928,-5.51912 -5.30928,-15.59752 v -44.153 q 0,-10.0784 5.30928,-15.59753 5.309284,-5.51912 15.310514,-5.51912 10.00124,0 15.31053,5.51912 5.3093,5.51913 5.3093,15.59753 v 44.153 q 0,10.0784 -5.3093,15.59752 -5.30929,5.51912 -15.31053,5.51912 z m 0,-11.99809 q 7.03791,0 7.03791,-8.27869 v -45.83273 q 0,-8.27869 -7.03791,-8.27869 -7.0379,0 -7.0379,8.27869 v 45.83273 q 0,8.27869 7.0379,8.27869 z"
       id="text6"
       style="font-size:123.472px;font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue';fill:#ffffff;stroke-width:0.260815"
       aria-label="o" />
    <path
       d="m 142.43413,228.77638 q -10.00123,0 -15.31052,-5.51912 -5.30931,-5.51912 -5.30931,-15.59752 v -44.153 q 0,-10.0784 5.30931,-15.59753 5.30929,-5.51912 15.31052,-5.51912 10.00124,0 15.31053,5.51912 5.3093,5.51913 5.3093,15.59753 v 44.153 q 0,10.0784 -5.3093,15.59752 -5.30929,5.51912 -15.31053,5.51912 z m 0,-11.99809 q 7.03791,0 7.03791,-8.27869 v -45.83273 q 0,-8.27869 -7.03791,-8.27869 -7.0379,0 -7.0379,8.27869 v 45.83273 q 0,8.27869 7.0379,8.27869 z"
       id="path6"
       style="font-size:123.472px;font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue';fill:#ffffff;stroke-width:0.260815"
       aria-label="o" />
  </g>
</svg>

Alles anzeigen

Danke für eure Antworten

aebian

Ob du nun die einzelnen Buchstaben als Path hast oder den ganzen Text als einen eigenen Path, ist egal.
Die einzelnen Buchstaben als Path zu haben erlaubt diese jeweils einzeln zu bearbeiten und bringt mehr Flexibilitaet mit sich.

Farblich kannst du sehr wohl die einzelnen Buchstaben anpassen: (hab das mal wirklich wyld gemacht damit man den Unterschied sehen kann)

SVG Code:

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 width="100%" height="100%" viewBox="0 0 563 247" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g id="layer1" transform="matrix(1,0,0,1,100.4,-403.626)">
        <path id="text1" d="M-100.4,404.5L4.6,404.5L4.6,439.5L-61.9,439.5L-61.9,504.25L-9.05,504.25L-9.05,539.25L-61.9,539.25L-61.9,614.5L4.6,614.5L4.6,649.5L-100.4,649.5L-100.4,404.5Z" style="fill:rgb(9,189,255);fill-rule:nonzero;"/>
        <path id="text2" d="M-34.483,404.766L4.367,404.766L29.567,594.815L30.267,594.815L55.467,404.766L90.817,404.766L53.717,649.765L2.617,649.765L-34.483,404.766Z" style="fill:rgb(202,38,38);fill-rule:nonzero;"/>
        <path id="text3" d="M59.465,404.773L111.612,404.231L154.063,648.34L115.566,648.74L108.059,600.257L108.066,600.956L64.319,601.411L57.819,649.341L22.121,649.712L59.465,404.773ZM103.17,567.818L84.759,447.132L84.059,447.14L68.522,568.18L103.17,567.818Z" style="fill:rgb(104,56,56);fill-rule:nonzero;"/>
        <path id="text4" d="M127.6,403.75L184.65,403.75C204.483,403.75 218.95,408.417 228.05,417.75C237.15,426.85 241.7,440.967 241.7,460.1L241.7,475.15C241.7,500.584 233.3,516.684 216.5,523.45L216.5,524.15C225.833,526.95 232.366,532.667 236.1,541.3C240.066,549.934 242.05,561.483 242.05,575.95L242.05,619C242.05,626 242.283,631.717 242.75,636.15C243.216,640.35 244.383,644.55 246.25,648.75L207.05,648.75C205.65,644.783 204.717,641.05 204.25,637.55C203.783,634.05 203.55,627.75 203.55,618.65L203.55,573.85C203.55,562.65 201.683,554.834 197.95,550.4C194.45,545.967 188.267,543.75 179.4,543.75L166.1,543.75L166.1,648.75L127.6,648.75L127.6,403.75ZM180.1,508.75C187.8,508.75 193.517,506.767 197.25,502.8C201.217,498.834 203.2,492.184 203.2,482.85L203.2,463.95C203.2,455.084 201.567,448.667 198.3,444.7C195.267,440.734 190.367,438.75 183.6,438.75L166.1,438.75L166.1,508.75L180.1,508.75Z" style="fill:rgb(0,233,255);fill-rule:nonzero;"/>
        <rect id="text5" x="240.85" y="403.75" width="38.5" height="245" style="fill:rgb(255,234,0);fill-rule:nonzero;"/>
        <path id="text6" d="M324.25,648.5C305.35,648.5 290.883,643.285 280.85,632.855C270.817,622.425 265.8,607.688 265.8,588.642L265.8,463.484C265.8,444.438 270.817,429.7 280.85,419.27C290.883,408.84 305.35,403.625 324.25,403.625C343.15,403.625 357.616,408.84 367.65,419.27C377.683,429.7 382.7,444.438 382.7,463.484L382.7,588.642C382.7,607.688 377.683,622.425 367.65,632.855C357.616,643.285 343.15,648.5 324.25,648.5ZM324.25,614.49C337.55,614.49 344.2,606.667 344.2,591.022L344.2,461.103C344.2,445.458 337.55,437.636 324.25,437.636C310.95,437.636 304.3,445.458 304.3,461.103L304.3,591.022C304.3,606.667 310.95,614.49 324.25,614.49Z" style="fill:rgb(0,255,89);fill-rule:nonzero;"/>
        <path id="path6" d="M403.75,648.5C384.85,648.5 370.384,643.285 360.35,632.855C350.317,622.425 345.3,607.688 345.3,588.642L345.3,463.484C345.3,444.438 350.317,429.7 360.35,419.27C370.384,408.84 384.85,403.625 403.75,403.625C422.65,403.625 437.117,408.84 447.15,419.27C457.184,429.7 462.2,444.438 462.2,463.484L462.2,588.642C462.2,607.688 457.184,622.425 447.15,632.855C437.117,643.285 422.65,648.5 403.75,648.5ZM403.75,614.49C417.05,614.49 423.7,606.667 423.7,591.022L423.7,461.103C423.7,445.458 417.05,437.636 403.75,437.636C390.45,437.636 383.8,445.458 383.8,461.103L383.8,591.022C383.8,606.667 390.45,614.49 403.75,614.49Z" style="fill:rgb(255,0,227);fill-rule:nonzero;"/>
    </g>
</svg>

Alles anzeigen

P.S.: Bitte den SVG Code naechstes Mal als Code und nicht als Spoiler in den Thread packen, dass erleichtert das kopieren ungemein, Danke!

PixelPatron

Danke für das Beispiel. Wie gesagt ist Grafik Design gar nicht meins aber man kommt halt leider nicht drum herum. Deswegen viel Geld in die Hand zu nehmen finde ich persönlich weird. Danke Danke

Der SVG Teil ist in einem Spoiler mit Code .. wird nur als XML erkannt

aebian

Verstehe nicht wie Grafik-Design und Geld hier zusammenpassen.
Ich kenne Inkscape nicht, aber dass, was ich oben mit Affinity Designer 2 gemacht hab, sollte mit Inkscape doch auch gehen?

Ansonsten kann man ja die SVG Datei nehmen und mit einem Editor z.B. Visual Studio Code aufmachen und dann einfach den HEX Wert der Farben anpassen.

PixelPatron

Zitat von aebian

Verstehe nicht wie Grafik-Design und Geld hier zusammenpassen.

Damit meinte ich das ich eher sowas lerne mit diesen Pfad Geschichten obwohl ich eher aus der webdev Ecke komme. Da ich aber finanziell mir keinen Designer oder Grafiker leisten kann bzw will mache ich halt sowas selber und lerne.

Zitat von aebian

... dann einfach den HEX Wert der Farben anpassen.

Diesen Hinweis hoffte ich als Antwort auf meinen Post zu bekommen. Deswegen auch das nette danke ?

Logo als .SVG

PixelPatron 8. Januar 2025 um 02:42

Jetzt mitmachen!

Ähnliche Themen

SVG Datei minimal bearbeiten

Tags

Benutzer online in diesem Thema

Rechtliches