Wie SVG für Web mit svg Tag

Hallo

Ich versuche schon eine ganze weile eine SVG Grafik zu exportieren. Ein Kollege hat es mir aus Adobe Illustrator exportiert und ich habe es mit verschiedenen Programmen getestet.

Wenn ich die Grafiken im HTML mit dem IMG Tag werden diese angezeigt.

Wenn ich diese nun aber mit dem SVG Tag einbinde wird mir leine Grafik angezeigt. Lade ich ein SVG (z.B. das coreUI Logo) funktioniert es.
Benötige ich irgend eine spezielle Einstellung?

https://github.com/coreui/coreui-free-bootstrap-admin-template/tree/main ...

https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main ...

Gruss

Koda

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 4837578492

Url: https://administrator.de/forum/wie-svg-fuer-web-mit-svg-tag-4837578492.html

Ausgedruckt am: 22.12.2024 um 05:12 Uhr

5 Kommentare

Neuester Kommentar

Freitag ..
https://design.tutsplus.com/tutorials/svg-files-from-illustrator-to-the- ...

Hi,

so ganz verstehe ich die Frage noch nicht. Meinst du das Umwandeln eines Raster-Image (JPG, PNG, GIF, WebP, AVIF) zu einer SVG-Vector-Grafik? Dann schau dir mal diesen Converter an: https://svgco.de/ oder diesen: https://convertio.co/de/svg-html/

Wenn es dir um das SVG-Format an sich geht findest du hier den XML-Aufbau:
https://www.w3schools.com/html/html5_svg.asp

Wenn du das SVG-Image schon hast, schau einfach in den Quellcode rein. Diesen musst du zwischen die <svg></svg> Tags setzen (width, height und evtl. viewBox nicht vergessen).

Beispiel:

<svg width="400" height="100">  
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />  
</svg>

Hier ein komplexeres XML-Beispiel eines Icons:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M473.5 176H384c-8.844 0-16 7.156-16 16s7.156 16 16 16h89.5C477.1 208 480 210.9 480 214.5v45C480 263.1 477.1 266 473.5 266H464c-8.844 0-16 7.156-16 16v45c0 16.53-11.61 29-27 29H416c-8.844 0-16 7.156-16 16c0 24.28-19.73 44.03-44 44.03L240 416c-2.781 0-5.516 .7187-7.938 2.094l-112 64C112.4 486.5 109.7 496.3 114.1 503.9C117.1 509.1 122.4 512 128 512c2.688 0 5.428-.6875 7.928-2.094L244.3 448L356 448c36.69 0 67.39-26.12 74.47-60.78C458.9 382.7 480 357.9 480 327V297.4c18.14-3.094 32-18.92 32-37.94v-45C512 193.3 494.7 176 473.5 176zM126 266.8c0-43.7 21.77-82.88 58.22-104.8c7.562-4.562 10.02-14.39 5.469-21.97C185.1 132.5 175.3 129.1 167.8 134.6C124.3 160.7 97.28 206.1 94.31 257.3L8.125 306.1c-7.703 4.375-10.41 14.12-6.047 21.81C5.016 333.1 10.44 336 16.02 336c2.672 0 5.375-.6562 7.859-2.062L126 276.1V266.8zM280 288c30.88 0 56-25.12 56-56V154c0-8.844-7.156-16-16-16s-16 7.156-16 16V232C304 245.2 293.2 256 280 256S256 245.2 256 232V118c0-4.812 2.438-9.203 6.531-11.75C290.1 89.09 321.9 80 354.4 80l61.6-.0034c.0039 0-.0039 0 0 0c.002 0-.002 0 0 0c.0137 0-.0137 0 0 0c2.703-.0098 5.166-.8599 7.394-2.049c.2617-.1387 .5625-.0742 .8203-.2285l80-48c7.578-4.547 10.03-14.38 5.484-21.95c-4.547-7.562-14.39-10.03-21.95-5.484L411.6 48h-57.15c-38.5 0-76.14 10.77-108.8 31.12C232.1 87.55 224 102.1 224 118V232C224 262.9 249.1 288 280 288zM637.5 183.5C632.9 176 622.1 173.8 615.5 178.5l-63.81 40.19c-7.469 4.703-9.719 14.58-5 22.06c3.031 4.828 8.234 7.469 13.55 7.469c2.906 0 5.859-.7969 8.516-2.469l63.81-40.19C640 200.8 642.3 190.1 637.5 183.5z"/></svg>  

Hier dein oben genanntes coreUI Logo:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1">  
  <defs>
    <symbol id="full" viewBox="0 0 376 178">  
      <g class="signet" style="fill: currentColor">  
        <path class="cls-2" d="M128,56.1244,89,33.6077a12,12,0,0,0-12,0L38,56.1243a12.0339,12.0339,0,0,0-6,10.3924V111.55a12.0333,12.0333,0,0,0,6,10.3923L77,144.459a12,12,0,0,0,12,0l39-22.5167a12.0333,12.0333,0,0,0,6-10.3923V66.5167A12.0336,12.0336,0,0,0,128,56.1244ZM126,111.55a4,4,0,0,1-2,3.4641L85,137.5308a4,4,0,0,1-4,0L42,115.0141a4,4,0,0,1-2-3.4641V66.5167a4,4,0,0,1,2-3.4641L81,40.5359a4,4,0,0,1,4,0l39,22.5167a4,4,0,0,1,2,3.4641Z"/>  
        <path class="cls-2" d="M106.0216,102.0713h-2.866a3.9993,3.9993,0,0,0-1.9246.4935L83.95,112.05,64,100.5315V77.554L83.95,66.0354,101.239,75.49a4.0007,4.0007,0,0,0,1.9192.4905h2.8633a2,2,0,0,0,2-2V71.2691a2,2,0,0,0-1.04-1.7547L87.793,59.0188a8.0391,8.0391,0,0,0-7.8428.09L60,70.6262A8.0245,8.0245,0,0,0,56,77.5549v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0429,8.0429,0,0,0,7.8433.0879l19.19-10.5312a2,2,0,0,0,1.0377-1.7533v-2.71A2,2,0,0,0,106.0216,102.0713Z"/>  
      </g>
      <g class="text" style="fill: currentColor">  
        <path class="cls-2" d="M200.7446,65.4285a15.0166,15.0166,0,0,0-15,14.9995V97.7054a15,15,0,0,0,30,0V80.428A15.0166,15.0166,0,0,0,200.7446,65.4285Zm7,32.2769a7,7,0,0,1-14,0V80.428a7,7,0,0,1,14,0Z"/>  
        <path class="cls-2" d="M164.0789,73.4878a7.01,7.01,0,0,1,7.868,6.0752.9894.9894,0,0,0,.9843.865h6.0305a1.0108,1.0108,0,0,0,.9987-1.0971,15.0182,15.0182,0,0,0-15.7163-13.8837A15.2881,15.2881,0,0,0,150,80.8635V97.27a15.2881,15.2881,0,0,0,14.2441,15.4163A15.0183,15.0183,0,0,0,179.96,98.8025a1.0107,1.0107,0,0,0-.9987-1.0971h-6.0305a.9894.9894,0,0,0-.9843.865,7.01,7.01,0,0,1-7.868,6.0757A7.1643,7.1643,0,0,1,158,97.4612V80.6724A7.1639,7.1639,0,0,1,164.0789,73.4878Z"/>  
        <path class="cls-2" d="M246.9221,92.9944a12.1584,12.1584,0,0,0,7.1843-11.0771V78.2161A12.1494,12.1494,0,0,0,241.957,66.0667H225a1,1,0,0,0-1,1v44a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1v-17h6.6216l7.9153,17.4138a1,1,0,0,0,.91.5862h6.591a1,1,0,0,0,.91-1.4138Zm-.8157-11.0771a4.1538,4.1538,0,0,1-4.1489,4.1494h-9.8511v-12h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>  
        <path class="cls-2" d="M289,66.0667H263a1,1,0,0,0-1,1v44a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1v-6a1,1,0,0,0-1-1H270v-12h13a1,1,0,0,0,1-1v-6a1,1,0,0,0-1-1H270v-10h19a1,1,0,0,0,1-1v-6A1,1,0,0,0,289,66.0667Z"/>  
        <path class="cls-2" d="M327,66.0667h-6a1,1,0,0,0-1,1V89.7142a7.0066,7.0066,0,1,1-14,0V67.0667a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V89.7142a15.0031,15.0031,0,1,0,30,0V67.0667A1,1,0,0,0,327,66.0667Z"/>  
        <rect class="cls-2" x="336" y="66.0667" width="8" height="38" rx="1"/>  
      </g>
    </symbol>
    <symbol id="signet" viewBox="0 0 160 160">  
      <g style="fill: currentColor">  
        <path class="cls-1" d="M125,47.091,86,24.5743a12,12,0,0,0-12,0L35,47.091a12.0336,12.0336,0,0,0-6,10.3923v45.0334a12.0335,12.0335,0,0,0,6,10.3923l39,22.5166a11.9993,11.9993,0,0,0,12,0l39-22.5166a12.0335,12.0335,0,0,0,6-10.3923V57.4833A12.0336,12.0336,0,0,0,125,47.091Zm-2,55.4257a4,4,0,0,1-2,3.464L82,128.4974a4,4,0,0,1-4,0L39,105.9807a4,4,0,0,1-2-3.464V57.4833a4,4,0,0,1,2-3.4641L78,31.5025a4,4,0,0,1,4,0l39,22.5167a4,4,0,0,1,2,3.4641Z"/>  
        <path class="cls-1" d="M103.0216,93.0379h-2.866a4,4,0,0,0-1.9246.4935L80.95,103.0167,61,91.4981V68.5206L80.95,57.002l17.2894,9.455a4,4,0,0,0,1.9192.4905h2.8632a2,2,0,0,0,2-2V62.2357a2,2,0,0,0-1.04-1.7547L84.793,49.9854a8.0391,8.0391,0,0,0-7.8428.09L57,61.5929A8.0243,8.0243,0,0,0,53,68.5216v22.976a8,8,0,0,0,4,6.9283l19.95,11.5185a8.0422,8.0422,0,0,0,7.8433.0879l19.19-10.5311a2,2,0,0,0,1.0378-1.7534v-2.71A2,2,0,0,0,103.0216,93.0379Z"/>  
      </g>
    </symbol>
  </defs>
</svg>

Gruß
firefly

Danke für eure Antworten.

Zitat von @4400667902:

Freitag ..
https://design.tutsplus.com/tutorials/svg-files-from-illustrator-to-the- ...

Ja zum Glück war Freitag ;). Aber wie ich bereits geschrieben habe ist es kein Problem ein SVG zu exportieren. Weder mit Illustrator noch einem anderen Programm.

Zitat von @firefly:

so ganz verstehe ich die Frage noch nicht. Meinst du das Umwandeln eines Raster-Image (JPG, PNG, GIF, WebP, AVIF) zu einer SVG-Vector-Grafik? Dann schau dir mal diesen Converter an: https://svgco.de/ oder diesen: https://convertio.co/de/svg-html/

Gruß
firefly

Unterdessen bin ich da schon etwas weiter. Ich habe herausgefunden, dass die Position meiner SVG's das Problem ist. Ich habe aber noch nicht herausgefunden wie ich diese verändern kann. Mal sehen ob ich da was bei google finde.
Wenn jemand dazu noch einen Tipp hat nehm ich diesen natürlich auch gerne

Zitat von @KodaCH:
Ja zum Glück war Freitag ;). Aber wie ich bereits geschrieben habe ist es kein Problem ein SVG zu exportieren. Weder mit Illustrator noch einem anderen Programm.

Hättest nur etwas weiter runter scrollen müssen 😉

dass die Position meiner SVG's das Problem ist. Ich habe aber noch nicht herausgefunden wie ich diese verändern kann.

Tja unsere Glaskugeln können deinen Quell-Code vor dem grauen Schleier leider nicht sehen .. 🤔
Positionierung ist mit CSS und absoluter oder relativer Positionierung schnell erledigt. Kommt halt auf deine Struktur an.
Einfach mal lesen wäre ja ein Anfang ....
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/position