Svg Datei einbinden

Computer: Software & Programmierung HTML & CSS
#1

Hallo zusammen,

ich habe folgendes Problem, bei dem ich eure Hilfe benötige:
Ich habe mit Illustrator eine svg datei erstellt, und diese möchte ich nun in einen container einbinden. Opera und IE bringen immer nur die Fehlermeldung, dass die Datei nicht gefunden wurde.

Hab ich was im vergessen?
Wie bindet man eine solche svg Datei richtig ein - was ist zu beachten. in Selfhtml komm ich einfach nicht weiter.

Hier mal der header:

<?xml version="1.0" encoding="UTF-8"?>Unbenanntes Dokument

der body:

<div class=„textfelder“ id=„apDiv60“>
<object data=„branchenliste.svg“ type=„image/svg+xml“ width=„199“ height=„975“>
<param name=„src“ value=„branchenliste.svg“>
Ihr Browser kann das Objekt leider nicht anzeigen!
</object>
</div>

und die angesprochenen css:

#apDiv60 {position:absolute;width:199px;height:1160px;z-index:50;left: 199px;top: 210px;visibility: visible;}

.textfelder {position:absolute;background-color: #ffffce; line-height:14px;}

was mach ich falsch?

Für Antworten sage ich schon jetzt mal ganz herzlich DANKE!

Grüße

Midir

#2

Hallo zusammen,

ich habe folgendes Problem, bei dem ich eure Hilfe benötige:
Ich habe mit Illustrator eine svg datei erstellt, und diese
möchte ich nun in einen container einbinden. Opera und
IE bringen immer nur die Fehlermeldung, dass die Datei nicht
gefunden wurde.

Hab ich was im vergessen?
Wie bindet man eine solche svg Datei richtig ein - was ist zu
beachten. in Selfhtml komm ich einfach nicht weiter.

Hier mal der header:

„http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

<?xml version="1.0" encoding="UTF-8"?>

„http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“>

Unbenanntes Dokument

der body:

<div class=„textfelder“ id=„apDiv60“>
<object data=„branchenliste.svg“ type=„image/svg+xml“
width=„199“ height=„975“>
<param name=„src“ value=„branchenliste.svg“>
Ihr Browser kann das Objekt leider nicht anzeigen!
</object>
</div>

hmm , fehlt da nicht die plugin angabe ?

versuch mal
&lt:stuck_out_tongue_winking_eye:REHTML>
<iframe src=„branchenliste.svg“ width=„199“ height=„975“>
</iframe>
</PREHTML>

wenn das geht versuch danach das
&lt:stuck_out_tongue_winking_eye:REHTML>
<object data=„branchenliste.svg“ width=„199“ height=„975“
type=„image/svg+xml“
codebase=„http://www.adobe.com/svg/viewer/install/“ />
</PREHTML>

oder
&lt:stuck_out_tongue_winking_eye:REHTML>
<embed src=„branchenliste.svg“ width=„199“ height=„975“
type=„image/svg+xml“
pluginspage=„http://www.adobe.com/svg/viewer/install/“ />
</PREHTML>

#3

Moin,

ich dachte immer, Images zeichnet man mit aus.

Grüße,
-Efchen

#4

Hallo

ich dachte immer, Images zeichnet man mit aus.

Ja, bei Images im Format JPEG, GIF und PNG.

Zitat: „Geeignete Dateiformate für Web-gerechte Grafiken sind vor allem GIF und JPEG, allmählich aber auch PNG“
Quelle: http://de.selfhtml.org/html/grafiken/einbinden.htm

Zu SVG:

Zitat: „In HTML lassen sich SVG-Grafiken mit Hilfe der Elemente embed oder object einbinden“
Quelle: http://de.selfhtml.org/grafik/formate.htm#svg

Gruß
A

1 Like
#5

Hallo,

liegt denn die svg-Datei im selben Verzeichnis wie die html-Seite?

Der doctype der svg-Datei gehört doch in die svg-Datei und nicht in den Kopf der html-Seite oder irre ich mich da?

MfG,

ujk

#6

Moin,

ich dachte immer, Images zeichnet man mit aus.

dachte ich auch. Habe ich aber weder unter Gecko- noch KHTML-basierten Browsern dazu gebracht, das SVG anzuzeigen. (Habe ich vor ca. einem Jahr probiert, vielleicht hat sich das ja inzwischen verbessert…)

Grüße,
Moritz

#7

Hallo,

für die nächste ct ist ein Artikel angekündigt

http://www.heise.de/ct/vorschau/

Klingt positiv.

MfG,

ujk

1 Like
#8

Ich hab letztes Jahr schonmal in einem anderen Forum einen Artikel von jemandem gelesen, der hat eine Website mit SVG aufgebaut und das hat einwandfrei geklappt.
Ich hab aber leider keinen Link mehr zur Seite, ich weiß aber dass SVG eigentlich wunderbar gehen müssten, ich hab die Site von dem ja selber getestet. Außerdem verwendet auch Wikipedia erfolgreich SVG.

#9

Liebe Leute,

vielen Dank für Eure Bemühungen!!

Ich habe das Problem mittels eines *.png Files aus der Welt schaffen können!

Danke nochmals

Viele Grüße

Midir

#10

auch Wikipedia kann das nicht
Hallo

Außerdem verwendet auch Wikipedia
erfolgreich SVG.

Erfolgreich aber nur, weil die SVG-Daten extra in PNG-Dateien umgewandelt werden, wenn diese innerhalb von HTML-Seiten dargestellt werden sollen.

Nur wenn die SVG allein für sich angezeigt werden soll, wird die XML-basierte SVG-Datei geladen. Innerhalb von HTML aber nicht.

Wie stellt man denn sonst externe XML-basierte Inhalte innerhalb von HTML-Seiten dar? Sicher nicht mit dem img-Tag.

Z.B. aus dem Quelltext einer Wikipedia-Seite:

Hier ist die in PNG gewandelte Datei eingebunden.

Gruß
A

1 Like
#11

Hallo,

Ich hab letztes Jahr schonmal in einem anderen Forum einen
Artikel von jemandem gelesen, der hat eine Website mit SVG
aufgebaut und das hat einwandfrei geklappt.

Mag ja sein, ist aber „beside the point“.

Ich habe explizit von Tags gesprochen; selbst wenn das nicht funktioniert, gibt es noch tags, und auch direktes Einfügen von SVG-Elementen in XHTML via XML-Namespaces.

Ich habe auch gemerkt, dass die Grundlagen von SVG ganz gut gerendert werden, wenn man fortgeschrittene Features benutzt, muss man es mit jeder Software, mit der es funktionieren soll, testen.

Ich hatte z.B. einen Text mit textLength-Attribut, an einem Path ausgerichtet. Drei Renderer, drei verschiedene Ergebnisse, keines davon vollständig korrekt. (Siehe hier für die ganze Geschichte: ).

Zusammenfassung: es geht, aber es ist noch ziemlich eklig, und man braucht viel Zeit und Workarounds.

Grüße,
Moritz

#12

Moin,

Ich hab letztes Jahr schonmal in einem anderen Forum einen
Artikel von jemandem gelesen, der hat eine Website mit SVG
aufgebaut und das hat einwandfrei geklappt.

Mag ja sein, ist aber „beside the point“.

Echt, warum?

Wollte der Fragesteller nicht SVG in seine Seite einbinden?

-Efchen