<img> mit SVG-Data-URI?

[Felix Riesterer]

Liebe Mitlesende,

ich möchte ein SVG-Bild als Platzhalter-Vorschau verwenden, so lange der Benutzer kein anderes Bild ausgewählt hat (Bild-Einfügen/Bearbeiten-Dialog eines WYSIWYG-Editors). Ich verwende ein img-Element, bei dem dynamisch das src-Attribut geändert wird. Um nun das SVG-Bild anzuzeigen, habe ich mir gedacht, ich benutze einfach einen Data-URI. Obwohl eine solche Möglichkeit in unserem Wiki nicht erwähnt wird (Data-URIs nur für CSS-Code), hat es mit einem vergleichsweise simplen SVG-Beispiel geklappt.

Nun möchte ich ein komplexeres Beispiel verwenden. Damit klappt es nicht mehr. Warum? Und ist das Verwenden von Data-URIs bei img-Elementen auch heute noch problematisch, dass es im Wiki keine Erwähnung findet?

Hier ein passendes Fiddle zum Nachvollziehen: [Fiddle]

Liebe Grüße,

Felix Riesterer.

[MudGuard]

Hi,

Hier ein passendes Fiddle zum Nachvollziehen: [Fiddle]

Hm. Mich irritiert der Doctype beim 2. Bild. Braucht's das? Ist das erlaubt?

Den rauszulöschen hilft aber auch nicht …

cu,
Andreas a/k/a MudGuard

[Matthias Apsel]

Hallo Felix Riesterer,

Entfernen von style="fill: #F09400;opacity:0.3;" führt zur Anzeige.

Bis demnächst
Matthias

[Felix Riesterer]

Lieber Matthias,

Entfernen von style="fill: #F09400;opacity:0.3;" führt zur Anzeige.

ach SO ist das? Darauf bin ich jetzt echt nicht selbst gekommen... Danke!

Meine anderen Fragen lässt das zwar unbeantwortet, jedoch komme ich nun einen kleinen Schritt weiter.

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer

Lieber Matthias,

Entfernen von style="fill: #F09400;opacity:0.3;" führt zur Anzeige.

ach SO ist das? Darauf bin ich jetzt echt nicht selbst gekommen... Danke!

Bei mir hat’s auch ’ne Weile gedauert, bis ich den Übeltäter gefunden hatte. Und dann erinnerte ich mich, dass ich das Problem auch schon mal hatte …

Und warum ist das so?

[Cliffhanger … Auflösung in der nächsten Staffel]

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Was bisher geschah:

Entfernen von style="fill: #F09400;opacity:0.3;" führt zur Anzeige. Und warum ist das so?

Und nun die Fortsetzung:

Welches Zeichen hat denn in einem URL eine Sonderbedeutung? Richtig: #. Was danach kommt, ist ein fragment identifier.

Wenn tatsächlich das Zeichen # gemeint ist, muss es kontextgerecht escapet werden.

LLAP 🖖

[MudGuard]

Hi,

Welches Zeichen hat denn in einem URL eine Sonderbedeutung? Richtig: #. Was danach kommt, ist ein fragment identifier.

Wenn tatsächlich das Zeichen # gemeint ist, muss es kontextgerecht escapet werden.

wird doch eigentlich gemacht:

document.querySelector("img").src = 'data:image/svg+xml;utf8,' +
      encodeURI(images[index]);

macht encodeURI nicht das, was es laut Namen macht?

cu,
Andreas a/k/a MudGuard

[Matthias Apsel]

Hallo MudGuard,

macht encodeURI nicht das, was es laut Namen macht?

offensichtlich nicht.

encodeURI('style="fill: #F09400;opacity:0.3;"') liefert style=%22fill:%20#F09400;opacity:0.3;%22%20

Die Raute ist ja auch das Fragment.

encodeURIComponent hilft.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@MudGuard

macht encodeURI nicht das, was es laut Namen macht?

Ob laut Namen oder nicht, encodeURI() escapet keine #.

Die Lösung wäre, stattdessen encodeURIComponent() zu verwenden.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Wenn tatsächlich das Zeichen # gemeint ist, muss es kontextgerecht escapet werden.

Im Kontext URL also durch %23. Beispiel: fill='%23663399' – a rebeccapurple circle.

Bei dir sind es mir aber mit dem JavaScript und dem encodeURI() zu viele Kontexte, um da auf die Schnelle zu überblicken, was da noch zu tun wäre.

LLAP 🖖