SVG in HTML einbinden geht nicht?

Guten Tag Gutefrage-Community,

wie im Titel schon steht, habe ich das Problem, dass ich eine SVG-Datei nicht in meine HTML-Datei einbinden kann. Dies geht in keiner von mir erstellen HTML-Datei. Ich versuche es wie folgt einzubinden:

<img src="value.svg">

Die SVG-Datei sieht wie folgt aus:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 400 400">
  <image id="v" x="5" y="5" width="390" height="390" xlink:href="..."/>
</svg>

5 Antworten

elmex7

12.01.2022, 23:28

Viele Browser führen bei der Einbindung über das <img> Tag Links und Scripts in SVG Dateien nicht aus. Mit z.B. <object> eingebunden hingegen schon.

PhotonX

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

21.12.2021, 18:57

Die paar Zeilen kannst du doch einfach in die HTML-Datei selbst einfügen, oder? <svg> ist ja ein HTML-Tag, der von Browsern verstanden wird.

https://www.w3schools.com/html/html5_svg.asp

Name11Unbekannt

Fragesteller

21.12.2021, 19:01

Naja schon, aber ist unschön wenn die SVG aus mehreren Hundert Zeilen besteht und man die SVG evtl sogar mehrmals im Quellcode hat. Für mich würde das manuelle einfügen pro SVG 24 vollgeschriebene Texteditor Zeilen bedeuten. Ist leider zu lang die ganze SVG-Datei hier rein zu schreiben.

PhotonX

21.12.2021, 19:02

@Name11Unbekannt

Ja gut, wenn sie umfangreicher sind, dann ist es eine andere Geschichte.

und man die SVG evtl sogar mehrmals im Quellcode hat.

Dafür gäbe es zumindest eine Lösung: Funktionen (z.B. JavaScript).

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

21.12.2021, 19:07

Die SVG-Datei sieht wie folgt aus:

Validiere mal Dein SVG. Zum Beispiel hier: https://validator.nu/

Alex

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, HTML

21.12.2021, 19:20

Validiere dein SVG und stelle sicher, dass der Wert für das href-Attribut stimmt. Ebenso kann es sein, dass die von dir genutzte Grafik beschädigt ist / der Browser den richtigen MIME-Typ nicht ermitteln kann.

Du kannst SVG-Grafiken übrigens noch über andere Wege einbinden. Entweder den SVG-Knoten direkt im HTML-Dokument platzieren oder einen object-Tag nutzen.

<object data="value.svg" height="..." type="image/svg+xml" width="..."></object>

verreisterNutzer

21.12.2021, 18:58

Schau mal ob das dir helfen kann:

https://www.mediaevent.de/svg-in-html-seiten/

Ich würde mit CSS arbeiten, ist übersichtlicher, lies es dir selbst mal durch.

Hallo,

ich habe ein SVG in mein HTML-Gerüst eingesetzt und mit CSS gestaltet. Weiß jemand, warum das SVG abgeschnitten wird?

Im SVG-Code habe ich eine stroke-width="2.5" angegeben. Je dünner desto weniger fällt das Abschneiden auf. Das SVG selbt ist mit width und height bei 100%. Selbst ein übergeordnetes DIV mit einem padding bewirkt nichts.

Das SVG scheint sich selbst nur ohne Linienstärke des Kreises zuzulassen. Das Bild unten ist nur zum Verständnis. Kein Screenshot aus dem Html-Ergebnis.

<div class="imgBox">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 96.125 96.125" enable-background="new 0 0 96.125 96.125" xml:space="preserve">
<pattern  x="-2" y="98" width="69" height="69" patternUnits="userSpaceOnUse" id="Polka_Dot_Pattern" viewBox="2.125 -70.896 69 69" overflow="visible"></pattern>
<circle id="Kreis" fill="#ffffff" fill-opacity=.1 stroke="#ffffff" stroke-width="2.5" cx="48.063" cy="48.063" r="47.813"/>
</svg>
</div>

...zur Frage

Wie kann man eine SVG-Datei in CSS nach links zentrieren?

Hallo,

ich möchte gerne eine SVG-Datei in meiner Webseite einbinden. Ich habe diese auch schon über <object> in HTML eingefügt.

Das object hat die Klasse Welt und ist in CSS hinterlegt. Dort habe ich width und height auf 75%. Nun wird mir die SVG aber so ziemlich mittig auf der Webseite angegeben.

Wie kann ich diese nach links positionieren, damit ich rechts z.B. einen Text scheiben kann?

HTML:

<object class="Welt" data="BluePlanet.svg" type="image/svg+xml"></object>

CSS:

.Welt {
  width: 75%;
  height: 75%;
}

Danke schon einmal im Voraus. :)

...zur Frage

Bei Mac Probleme CSS bei HTML Datei einzubinden?

Hallo,

bei mir funktioniert irgendwie nicht das Einbinden von der CSS Datei in meine Html Datei, hab beide in einem Ordner, richtigen code eingegeben, also nichts verschrieben. Trotzdem funktioniert es bei mir nicht. Könnte es was damit zutun haben, dass meine HTML Datei mit dem Browser geöffnet wird und meine CSS-Datei mit meinem Texteditor (Benutze Atom) oder vielleicht doch etwas anderes. Benutze btw Mac (MacBook Pro) glaube dass das ein wichtiger Faktor ist. Justmacthings!

Edit: Hab nun die Datei hinterlegt, eventuell findet ihr ja den Fehler

...zur Frage

HTML/CSS hintergrund gesplittet Schwarz weiß?

Hallo,

ich möchte den Hintergrund auf meiner Website gesplittet weiß mit einer Ecke schwarz haben.

(gewollte Ansicht der Seite)

Aktuell benutzte ich ein riesieges svg Rechteck um den Teil einzufärben und limmitiere die ansicht der seite auf die gewollte Ansicht, scheint mir aber eher ineffizient zu sein, gibts da eine bessere Methode das zu lösen?

(gesamt Ansicht der seite)

Hier der aktuelle code:

(die Koordinaten sind wahrscheinlich etwas merkwürdig weil ich sie mir von einem Programm passgenau hab berechnen lassen)

HTML:

   <svg class="black_bg">
      <rect fill="rgba(0,0,0,1)" id="Rechteck_29" rx="0"  ry="0" x="0" y="0" width="1175" height="1649">
      </rect>
   </svg>

css:

.black_bg {
   width: 1175px;
   height: 1649px;
   position: absolute;
   overflow: visible;
   transform: matrix(1,0,0,1,1744.92,-218.8203) rotate(24deg);
   transform-origin: center;
}

...zur Frage

SVG-Favicon benutzt kein CSS?

Guten Tag,

ich möchte folgendes (Logo.svg) SVG-Element als Favicon setzen:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" 
     y="0px" 
     width="1134px" 
     height="702px" 
     viewBox="-36.12 -144.12 1134 702"
     enable-background="new -36.12 -144.12 1134 702" 
     xml:space="preserve">
    <polygon fill="red" points="556.56,0.84 574.8,39.96 193.68,445.56 18.24,445.8 0.24,406.32 459.48,56.04 "/>
    <polygon fill="red" points="801.479,0.84 819.72,39.96 438.6,445.56 263.16,445.8 245.16,406.32 704.399,56.04 "/>
    <polygon fill="red" points="1045.319,1.8 1063.56,40.92 682.439,446.52 507,446.76 489,407.28 948.239,57 "/>
    <polygon fill="blue" points="381.709,0.84 556.56,0.84 175.44,406.2 0.24,406.32 "/>
    <polygon fill="blue" points="626.63,0.84 801.479,0.84 420.36,406.2 245.16,406.32 "/>
    <polygon fill="blue" points="870.47,1.8 1045.319,1.8 664.2,407.16 489,407.28 "/>
</svg>

Jedoch verändert sich die Farbe nicht, sondern bleib nur schwarz.

Ich füge das Element im head so hinzu:

<link rel="icon" type="image/svg+xml" href="/Media/Images/Logo.svg">

...zur Frage

Wie und mit welchen Programm kann ich eine css-Datei schreiben und wie kann ich diese in eine html-Datei einbinden?

Bitte die css und html Anweisungen mitschicken. Danke

...zur Frage

Zugriff auf svg Element in HTML gibt immer "null" zurück?

Hallo zusammen,

folgendes Problem:

Ich möchte aus meinem javascript Code zu laufzeit auf meine sonarGrafik.svg zugreifen können um deren Elemente zu manipulieren (oder neue hinzufügen zu können).

So sieht erstmal der ganze HTML Code aus:

<!DOCTYPE html>
<html>
<head>
    <title>Arduino Daten</title>
    <link rel="icon" href="data:,">
    <script src="scripts/script.js"></script>
    <link rel="stylesheet" href="styles/style.css"> 
</head>
<body>
    <object id = "svgObject" data="styles/sonarGrafik.svg" type="image/svg+xml"></object>
</body>
</html>

Der betroffene Teil in meinem javascript Code:

function insertDots(cx, cy) {
    const svgObject = document.getElementById("svgObject");
    console.log(svgObject.contentDocument) // hier erhalte ich in der Console immer "null"


    svgObject.addEventListener("load", function() {
        if (svgObject && svgObject.contentDocument) {
            const sonarSVG = svgObject.contentDocument.getElementById("sonar");
            console.log(sonarSVG);
        }
    });
}

(Die funktion insertDots(cx, cy) wird alle paar sekunden aufgerufen und ich erhalte in der Browser Konsole immer nur null. Dementsprechend ist die if Bedienung darunter auch nie wahr)

In meiner .svg Datei gibt es definitv die id= "sonar":

<svg id="sonar" width="700" height="700" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" fill="rgba(128, 128,   128, 0.25)" />
</svg>

So sieht meine Ordnerstruktur aus:

Website
│   SonarVisuallisierung.html
│
├── scripts
│       script.js
│
└── styles
        style.css
        sonarGrafik.svg

Gibt es irgendwo einen Fehler oder eine andere Möglichkeit auf die Elemente der .svg Datei über das script zuzugreifen? (Den Inhalt der .svg will ich ausgelagert lassen und nicht in das HTML einfügen wegen der Übersichtlichkeit)

Danke für alle Lösungsvorschläge.

...zur Frage

Html / CSS: Abstand zwischen vier Bildern?

Hey.

Ich möchte gerne zwischen meinen vier Bildern einen Abstand von 0,5cm - 2cm.

Wie und wo trage ich das ein?

<ul>
  <h4><li><a href="Forum.html">Forum</a></li></h3>
  <h4><li><a href="Kontakt.html">Kontakt</a></li></h3>
  <h4><li><a href="shop.html">Vintage Kleidung & Möbel</a></li></h4>
  <h4><li><a href="Startseite.html">Startseite</a></li></h4>
  <img src="Vintage0.jpg" width="250" height="250" alt="vinjacke">
  <Img src="Vintage3.jpg" width="250" height="250" alt="vinjacke">
  <Img src="Vintage4.jpg" width="250" height="250" alt="vinjacke">
  <Img src="Vintage5.jpg" width="250" height="250" alt="vinjacke">

(Für mich ist das ziemliches Neuland. Bitte Rücksicht nehmen, ich mache das erst seit vorgestern)

PS.: Das ist nur ein Teil meiner HTML-Datei! Ich möchte nur, dass ihr einen kleinen Ausschnitt seht.

Danke.

...zur Frage

iFrame Schriftart ändern oder RTF einbinden

Hallo. Wie kann ich über iFrame (html) die Schriftart von der geladenen txt Datei ändern über CSS? Geht das? Oder ansonsten: Wie kann ich eine RTF Datei einbinden, die nicht runtergeladen sondern angezeigt wird???

Danke

...zur Frage

Wie kann ich das Rutschen des DIV-Containers verhindern?

Hallo, wie auf dem Foto (schlecht, rechts unten) zu erkennen möchte ich 3 DIV-Container nebeneinander platzieren.Dazu habe ich alle drei in ein großen Container gesteckt. Jedoch "rutscht" das rechte DIV immer nach unten ohne dass ich es möchte oder weiß wieso es das tut...Ich hoffe es kann mir hier geholfen werden!

CSS:

#body {
    background-color: aqua;
    width: 100%;
    height: 100%;
}


#mitte {
    height: inherit;
    max-width: 60%;
    background-color: aliceblue;
}


#links {
    width: 15%;
    height: inherit;
    float: left;
    background-color: brown;
}


#rechts {
    width: 15%;
    height: inherit;
    float: right;
    background-color: blueviolet;
}

Da HTML hier Probleme mit den < und > hat, davon ein Bild im Anhang...

Danke im voraus, Thomas

...zur Frage

CSS Grüne Blöcke nacheinander anzeigen lasen?

Von oben nach unten, aber ohne zusätzliche HTML Tags wie <div> <p> oder <br>.

Der Code sieht so aus <div> a*3 </div> nichts besonderes und dann noch bisschen padding height width background-color

...zur Frage

Content in die mitte packen html, css?

Ich arbeite an einem Discord bot Dashboard und ich möchte, dass die Kästchen vom <li></li> nicht untereinenander sind sondern neben einander bis zum bildschirm rand und dann eins runter gehen.

html:

 <ul>
  <li><a class="content"><button onclick='ping()'>Working?</button>   
  </a></li>
  <li><a class="content"><input type="text" id="invite" placeholder="server invite"></a>
  <a class="content"><button onclick="add_invite()">Join</button></a>
  <br></li>
  <li>
</ul>

Css:

html,
body{
    width: 90%;
    color: #FE72F3;


 background: #2B2B2B;
    height: 100%;
}
ul{
    list-style: none;
    width: 100%;
    height: 100%;
}
li{


    width: 320px;
    height: 220px;
    background: #494949;
    border: 2px solid #1d1c1c;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-top: 20px;
}
input{
    width: 90%;
    margin: 10px;
    height: 30px;
    border-radius: 5px;


}
button{
    width: 93%;
    margin: 10px;
    height: 35px;
    border-radius: 5px;
    
}

Wie mach ich das?

...zur Frage

Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

/* Dienstleistungen*/

.dienstleistungen{

justify-content: center;

width: 75%;

}

.mofa-zündung-service{

height: 50%;

width: auto;

}

.mofa-getriebe-revisionen{

height: 25%;

width: auto;

align-self: top;

}

.mofa-vergaser-tuning{

height: 25%;

width: auto;

align-self: top;

}

.mofa-kolben-ersatzteile{

height: 25%;

width: 50%;

}

/*!Dienstleistungen*/

HTML:

<h3>Dienstleistungen</h3>

<li><a href="#">Service</a></li>

<li><a href="#">Revisionen</a></li>

<li><a href="#">Tuning</a></li>

<li><a href="#">Ersatzteile</a></li>

</div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

...zur Frage

HTML style="" nur erster a href funktioniert?

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Autotuning</title>
<link rel="shortcut icon" href="T4Nissan 240 SX BR101.png" type="image/x-icon">
<meta name="description" content="">
<link href="styleSeite1.css" rel="stylesheet">
</head>
<body>
<br><br><br><br><br><br><br><center>
<a href="NFSU.html"><img src="images/NFSU.jpg" width="" height="230" style="align:/></a>
<a href="NFSU2.html"><img src="images/NFSU2.JPG" width="" height="235" style="align:/></a>
<a href="NFSUC.html"><img src="images/NFSUC.JPG" width="" height="241" style="align:/></a>
<a href="NFSC.html"><img src="images/NFSC.JPG" width="" height="237" style="align:/></a>
<a href="NFSMW2005.html"><img src="images/NFSMW2005.JPG" width="" height="230" /></a><br>
<a href="MC3DER.html"><img src="images/MC3DER.JPG" width="" height="250" style="vertical-align:/></a>
<a href="MCLACE.html"><img src="images/MCLACE.JPG" width="" height="250"/></a>
<a href="Gran Turismo 6.html"><img src="images/Gran Turismo 6.jpg" width="" height="250" /></a>
<a href="LEGO.html"><img src="images/LEGO.JPG" width="" height="250" /></a><br>
<a href="Modellbau.html"><img src="images/Modellbau.jpg" width="500" height="" align="top"/></a>
<a href="Sonstige.html"><img src="images/Sonstige.JPG" width="230" height="" align="top"/></a>
<a href="GTA5.html"><img src="images/Coil Cyclone.jpg" width="350" height="" align="top"/></a>
<a href="Silent Hill.html"><img src="images/Halo.JPG" width="185" height="" align="top"/></a>
</body>
</html>

durch ,,style=""´´ werden die Hyperlinks ohne Abstand platziert. Warum werden diese Hyperlinks gruppiert und alle außer dem erstem werden ignoriert? Die Frage ist leicht zu verstehen beim Blick auf den F12-Debugger im Browser. </style> löst das Problem nicht. autotuningyv.square7.ch/Seite1.html. Kann jemand den Quelltext bitte korrigieren?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen