Frage zum Wiki-Artikel „responsiv“

[Detlef Mietke]

Wertes Team,

wenn ich das (die) gegebenen Beispiele für responsives SVG anwende (copy and paste in eigenständige Seite), so wird die SVG-Grafik vergrößert dargestellt.

Mit den CSS-Angaben für den SVG tag mit width:100% und height:auto und der Verwendung der viewBox für den aktuellen SVG tag mit einer darzustellenden SVG-Grafik z.B. mit 480 x 280 Pixel also viewBox="0 0 500 300" ist das Ergebnis auf den horizontalen Viewport vergrößert und die Höhe proportional angepasst. Die responsive Eigenschaft besteht.

Optimal wäre es, wenn bei großem Viewport die Originalgröße der SVG-Grafik angezeigt und nur beim Verkleinern des Viewports proportional skaliert wird (responsiv). Wird für den aktuellen SVG tag mit style="height: 300px" die CSS Anweisung height:auto überschrieben, dann wird das SVG Beispiel nicht vergrößert. Die responsive Eigenschaft des SVG Inhalts besteht, allerdings bleibt die ViewBox-Höhe dann für einen verkleinerten Viewport fixiert.

Ich habe viel gesucht und versucht aber nichts Optimales gefunden. Gibt es dafür eine Lösung, wobei die vielleicht nicht konformen Eigenheiten der IE-Browser nicht zu berücksichtigen sind?

Mit freundlichem Gruß D. Mietke

[Matthias Scharwies]

Servus!

Wertes Team,

Optimal wäre es, wenn bei großem Viewport die Originalgröße der SVG-Grafik angezeigt und nur beim Verkleinern des Viewports proportional skaliert wird (responsiv).

Du kannst einmal mit Media queries und preserveAspectRatio experimentieren.

Mit freundlichem Gruß D. Mietke

Herzliche Grüße

Matthias Scharwies

[Detlef Mietke]

Guten Abend Herr Scharwies,

danke für Ihre schnelle Antwort. Die Attribute mit 'preserveAspectRatio ...meet' hatte ich auch ausprobiert. Sie zeigten nur Wirkung, wenn im aktuellen SVG tag die Höhe mit CSS-Style überschrieben wird, sonst wird die SVG Grafik wie beschrieben vergrößert, ist responsiv und die preserve-Attribute bleiben wirkungslos. Den Durchblick zum Gebrauch von Media queries habe ich nicht. Auf meiner Webseite (elektroniktutor.de aber noch ohne SVG Nutzung) ist im meta Tag der viewport wohl richtig eingebunden und im CSS wird eine Formatierung für schmale Viewport angegeben, die auch funktioniert, aber für weiteres Verständnis fehlt mir das Wissen. Im Lehrplan meiner Generation gab es kein IT, alles nur selber mit SELFHtml sowie durch try and error erarbeitet.

Mit freundlichen Grüßen D. Mietke

Du kannst einmal mit Media queries und preserveAspectRatio experimentieren.

[Gunnar Bittersmann]

@@Detlef Mietke

Optimal wäre es, wenn bei großem Viewport die Originalgröße der SVG-Grafik angezeigt

?? Was wäre denn die Originalgröße einer Vektorgrafik?

und nur beim Verkleinern des Viewports proportional skaliert wird (responsiv).

Also sowas wie

svg
{
  width: 100%;
  max-width: 8.15em;
}

LLAP 🖖

[Detlef Mietke]

Guten Tag Herr Bittersmann,

die Originalgröße einer SVG Grafik ist nach meinem Verständnis z. B. bei einem Rechteck mit 500 x 300 Pixeln (angelegt mit diesen Werten für Breite und Höhe) gegeben und sollte dann auch bei einem großen Viewport mit responsiver Möglichkeit nicht vergrößert dargestellt werden.

Ich weiß, das viewBox Koordinatensystem wird mit dem Viewport automatisch verrechnet und man kann so auch Vergrößerungen oder Verkleinerungen erhalten. Bei der responsiven Gestaltung habe ich das nicht erwartet und finde es nicht so optimal.

Danke für Ihren Hinweis mit max-width und einem zur 'SVG-Erstellungsgröße' passenden Wert. Dann wird auch ohne Angaben für height (oder mit height:auto) im aktuellen SVG tag mit den viewBox Attributen die SVG Grafik responsiv und bei größerem Viewport in ihrer Erstellungsgröße dargestellt.

Ich danke für die schnelle Hilfe aus dem Forum, mit freundlichen Grüßen D. Mietke

[Matthias Apsel]

Hallo Detlef Mietke,

Guten Tag Herr Bittersmann,
Danke für Ihren Hinweis

Im Forum duzen wir einander.

die Originalgröße einer SVG Grafik ist nach meinem Verständnis z. B. bei einem Rechteck mit 500 x 300 Pixeln

Eine SVG-Grafik^[1] hat keine Originalgröße. Sie kann verlustfrei in jeder beliebigen Größe dargestellt werden.

Bis demnächst
Matthias

---

1. so wie ABS-System, LCD-Display, … ↩︎

[Gunnar Bittersmann]

@@Matthias Apsel

die Originalgröße einer SVG Grafik ist nach meinem Verständnis z. B. bei einem Rechteck mit 500 x 300 Pixeln

Eine SVG-Grafik[^Pleonasmus] hat keine Originalgröße.

… und keine Pixel.

TIL: Man kann den Fußnoten auch Namen geben.

LLAP 🖖

[Mitleser]

Eine SVG-Grafik[^Pleonasmus] hat keine Originalgröße.

SVG kann sehr wohl eine Originalgröße haben, was aber gewöhnlich eher im Druck als im Web relevant ist. Außer:

… und keine Pixel.

Das SVG enthält Pixeldaten, dann kann es auch im Web relevant sein.

[Detlef Mietke]

Hallo Matthias,

Im Forum duzen wir einander.

habe ich kein Problem damit, freut mich, danke.

Eine SVG-Grafik[^Pleonasmus] hat keine Originalgröße. Sie kann verlustfrei in jeder beliebigen Größe dargestellt werden.

ich halte es nicht so sehr mit Fremdworten, die ich nachschlagen muss. Ja, in SVG ist das Wort Grafik enthalten, aber es ging doch nicht um grammatikalische Fragen - oder? Es ist mir bekannt, dass Vektorgrafiken in jeder Vergrößerung oder Verkleinerung optimal dargestellt werden. Die Originalgröße oder Vergrößerung mit dem Faktor 1 ist durch die Zahlenangaben für die Grafik gegeben. Die Darstellung am Bildschirm erfolgt in der kleinsten Einheit durch Bildpunkte, den Pixeln. Für Naturwissenschaftler hat jede Maßzahl auch eine passende Benennung, daher habe ich Pixel geschrieben vielleicht ist Einheiten am neutralsten. Vektorzeichenprogramme oder Literatur zu SVG benennen die Einheiten auch, oftmals als Pixel. Im Koordinatensystem wird auch die Einheit in jeder Richtung genauer definiert, 1 Kästchen, 1 mm, 1 s, 1 Ohm ...

Das ist jetzt auch keine Kritik, wie ich Deinen Hinweis auch nicht als negative Kritik sehe.

Mit freundlichem Gruß Detlef

[Gunnar Bittersmann]

@@Detlef Mietke

Die Originalgröße oder Vergrößerung mit dem Faktor 1 ist durch die Zahlenangaben für die Grafik gegeben.

Die Angaben im viewBox-Attribut legen das Koordinatensystem fest und haben nichts mit der dargestellten Größe der Grafik zu tun. Sonst wäre dieser Kreis ja nur 2×2 Pixel groß. Ist er aber nicht; die Grafik wird so groß dargestellt, dass sie 100% der Containerbreite (hier des body-Elements) ausfüllt.

Die Größe kann (sollte aber nicht) mit width- und height-Attributen im SVG angegeben sein. Oder mit den entsprechenden CSS-Eigenschaften; dann kann man auch den max- machen sowie anstatt px sinnvolle Längeneinheiten verwenden: em, rem, %, vw, vh, vmin, vmax.

Anders gesagt: SVG-Datei im Texteditor öffnen, width- und height-Attribute entfernen, Datei speichern.

LLAP 🖖

[Detlef Mietke]

Hallo Gunnar,

ja, viewBox erstellt ein neues Koordinatensystem im der SVG Darstellungsebene (Wrapper). Dein Kreisbeispiel zu verstehen bereitet mir keine Probleme.

Die Angaben im viewBox-Attribut legen das Koordinatensystem fest und haben nichts mit der dargestellten Größe der Grafik zu tun.

Für responsives Verhalten der SVG Inhalte sollte die CSS-Eigenschaft für SVG tag dann width:100% und height:auto sein und das viewBox Attribut angewendet werden. So habe ich es in diversen Erklärungen gelesen. Im SELFHtml-Wiki wird in der Texterklärung der viewBox Werte Pixel als Einheit geschrieben. Macht meines Erachtens auch Sinn. Ein Rechteck mit 500 x 200 Einheiten sollte auf einem Bildschirm in 500 x 200 Bildpunkteinheiten erscheinen und nicht bis zur maximalen Viewportausdehnung proportional vergrößert werden. In Grafikprogrammen sind oder werden die Raster in bestimmten Maßzahlen, meist Pixel eingestellt. Die Eigenschaften des Beispielrechtecks in den Dateiformaten JPG, GIF oder PNG werden im Pixelmaß angegeben.

Ein SVG Rechteck erstellt durch <rect x="0" y="0" width="500" height="200" style="fill: #ff0;"/> ohne viewBox nur im SVG tag ohne Angaben zu width und height dargestellt, erscheint wie eine gleich große Grafik im PNG-Format mit 500 x 200 (Bildschirm)-Pixel.

Zur responsiven Darstellung mit oben genannten CSS-Eigenschaften für den SVG tag und dem viewBox Attribut zur Darstellung der gesamten SVG, kein Ausschnitt und nicht auf den maximalen Viewport skaliert. Wie sollen dann die Werte in der viewBox benannt sein? Mit viewBox="0 0 500 200" wird bei großem Viewport skaliert vergrößert. Das entspricht nicht meinen Vorstellungen.

Mit den hier im Forum erhaltenen Tipps mit Angaben zu max-width im SVG tag und viewBox Attributen erhielt ich ein Ergebnis nach meinem Wunsch. Nun soll aber die Einheit Pixel (px) vermieden werden. Mit style="max-width:500px und viewBox="0 0 500, 200" ist es so, wie es mir gefällt und bei CSS muss nach den Werten eine Angabe zur Einheit folgen. Der Vergrößerungsfaktor ist max-width / width = 1.

Mit der Einheit em ist bei unveränderten Werten die SVG vergrößert, mit % zwischen 0 bis 100 wird skaliert, aber ohne ersichtliche Kontrolle hinsichtlich der SVG Größen mit 500 und 200 bei width und height. Mit Einheiten wie vw oder vmax ist es ohne zu rechnen auch nicht möglich und die Umrechnung würde über die Bildschirmeinheit Pixel erfolgen. Eine Einheitenangabe für die Werte in der viewBox ist nicht vorgesehen und müsste, wenn man eine einträgt dann für width und height gleich lauten, aber die Werte müssten sich auch je nach gewählter Einheit ändern.

Die relativen Einheiten wie em oder % für max-width machen Sinn, wenn man mit dem viewBox Attribut nur einen Ausschnitt der SVG zeigen will, ohne dass der auf den maximalen Viewport vergrößert gezeigt wird. Um das Seitenlayout nicht zu zerstören, ist dann wohl Probieren angesagt - war auch nicht mein ehemaliges Anliegen.

Oder mit den entsprechenden CSS-Eigenschaften; dann kann man auch den max- machen sowie anstatt px sinnvolle Längeneinheiten verwenden: em, rem, %, vw, vh, vmin, vmax.

Ich danke für die erhaltene Hilfe und die Anregungen, mit besten Grüßen Detlef

[Matthias Apsel]

Hallo Detlef Mietke,

Leider kann ich nicht so richtig nachvollziehen, was du für die verschiedenen Viewportgrößen erreichen möchtest. Kannst du versuchen, das genauer zu beschreiben. Zur Not auch eine Kritzelgrafik erstellen und hier hochladen?

Bis demnächst
Matthias

[Detlef Mietke]

Hallo Matthias,

danke für Deine Geduld. Ich füge hier mal meine Testseite ein und beschreibe daran, was ich meine. Der Viewport ist in meinem Webprojekt auf 62em mit Zentrierung im Browserfenster vorgegeben. Wird das Browserfenster verkleinert, so soll der Seiteninhalt automatisch skaliert werden, sich responsiv verhalten.

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <title>Test.svg</title>
        <style>
        body {max-width:62em;margin:0 auto;overflow-y:scroll;}
        main {background: #ddd;}
        svg {
            width: 100%;
            height: auto;
        }
        </style>
     </head>
    <body>
    <main>
        <h1>Test responsiv SVG</h1>

        <svg style="max-width:500px" viewBox="0 0 500 200">
            <rect x="0" y="0" width="500" height="200" style="fill: #ff0;" />
             <rect x="50" y="50" width="100" height="100" style="fill: #0ff;" />
        </svg>

    <p>Textzeile nach dem Grafikbereich</p>
    </main>
    </body>
</html>

Das SCG Beispiel hat eine Fläche von 500 x 200 Bildschirmeinheiten, als PNG-Grafik sind das 500 x 200 Pixel. Im Seitenlayout (großer Viewport beim Nutzer) soll die SVG in dieser Größe angezeigt werden, aber responsives Verhalten haben, wenn der Nutzer seinen Viewport verkleinert oder einen kleineren besitzt.

Ohne max-width ist das Verhalten responsiv, die SVG wird allerdings im Seitenlayout vergrößert, ist von mir nicht gewünscht. Mit dem CSS-Style max-width:500px - eine Einheitenangabe ist ja notwendig - entspricht die Darstellung der SVG meinem Wunsch.

Pixel (px) Einheiten sollen nun nicht sein, also z. B. dann em oder %. Bei max-width:30em oder rund 50% ist das Layout nahe meinem Wunsch. Der Vergrößerungsfaktor ist die Division der Angabe width:100% das sind für das Seitenbeispiel 62em durch width=500 dem Wert aus der viewBox. Ist die Einheit Pixel, so ist der Vergrößerungsfaktor 1, die SVG erscheint in ihrer nativen (Original)-Größe. Bei der Verwendung relativer Einheiten muss man entweder umständlich rechnen oder einen passenden Wert durch Probieren ermittelln. Die Berechnung würde aber wieder nur über die Einheit Bildpunkt=Pixel gehen.

Mit dem Vorschlag aus dem Forum max-width zu verwenden hatte ich eine gut passende Lösung erhalten. Der Hinweis die absolute Einheit px nicht zu verwenden und dafür eine der anderen relativen Einheiten zu verwendet hat in meinen Versuchen zu keiner so gut umzusetzenden Lösung geführt.

Soll mit dem viewBox Attribut nur ein bestimmter Ausschnitt der SVG gezeigt werden z.B. viewBox="0 0 150 200", muss für den Vergrößerungsfaktor=1 für max-width:150px stehen. Mit relativen Einheiten finde ich nur durch Probieren einen passenden Wert, damit das Seitenlayout von der sonst wieder skalierten SVG nicht durchbrochen wird und die native Höhe von 200 Bildschirmeinheiten erhalten bleibt. Eine mathematisch exakte Berechnung ist möglich, aber viel zu umständlich. Den Werten in der viewBox sind keine Einheiten zugeordnet, aber bei Umrechnungen sind es Bildschirmeinheiten=Pixel.

In (m)einem Webprojekt würden auf einer Seite sicherlich mehr als eine SVG eingebunden sein, daher sollte das Erstellen des Layouts einfach nachvollziehbar sein und nicht auf Probieren beruhen. Ein Vergrößerungsfaktor hat keine Benennung (Einheit), also können auch nur gleichartig benannte Werte für max-width und width (der viewBox) miteinander verrechnet werden. Die Werte der viewBox scheinen mit der nicht angegebenen Einheit Pixel verbunden zu sein.

Für ein schönes Wochenende und mit freundlichen Grüßen Detlef

[Vollzitat entfernt]

[Richard Rüfenacht]

Hallo Detlef

In (m)einem Webprojekt würden auf einer Seite sicherlich mehr als eine SVG eingebunden sein, daher sollte das Erstellen des Layouts einfach nachvollziehbar sein und nicht auf Probieren beruhen.

Kann es sein, dass dir die verschiedenen Möglichkeiten, wie SVG-Grafiken in Webseiten eingebunden werden können, nicht bekannt sind? Ich denke, einige deiner Probleme wären gelöst, wenn du die SVG-Grafiken mit dem img-Element einbinden würdest und darin z.B. mit width skalierst.

Mit besten Grüssen
Richard

[Detlef Mietke]

Hallo Richard, doch, eine SVG mit dem img tag einzubinden ist mir bekannt, und dass sie sich dort responsiv verhält, weiß ich. Mein Ziel ist, nicht direkt mit SVG sondern mich mit der JavaScript Bibliothek Snap.SVG vertraut zu machen, um später interaktive Animationen zu erstellen, die ich bisher mit Flash als SWF-Dateien erstellt habe. Die Verwendung des img tag kann dabei wohl zu Einschränkungen führen. Im grundsätzlichen Verhalten ist Snap.SVG mit SVG recht identisch und die Problematik der von mir unerwünschten Vergrößerung wurde freundlicherweise gelöst.

Meine letzte Antwort bezog sich nur auf die vorgeschlagene Vermeidung der absoluten Werteangabe in Pixel, die doch scheinbar in der internen automatischen Berechnung zugrunde liegt.

Mit freundlichem Gruß, Detlef

[Richard Rüfenacht]

Hallo Detlef

Mein Ziel ist, nicht direkt mit SVG sondern mich mit der JavaScript Bibliothek Snap.SVG vertraut zu machen, um später interaktive Animationen zu erstellen, die ich bisher mit Flash als SWF-Dateien erstellt habe.

Dann sieht das natürlich ganz anders aus. Mit Snap ist es sicher sinnvoll mit px zu arbeiten. Warum das Einbinden als img-Element aber Probleme machen soll, ist für mich nicht ganz verständlich, allerdings vorstellbar.

Viel Spass und beste Grüsse
Richard

[Julius]

Hallo Richard, Hallo @Detlef Mietke

Mein Ziel ist, nicht direkt mit SVG sondern mich mit der JavaScript Bibliothek Snap.SVG vertraut zu machen, um später interaktive Animationen zu erstellen, die ich bisher mit Flash als SWF-Dateien erstellt habe.

Dann sieht das natürlich ganz anders aus. Mit Snap ist es sicher sinnvoll mit px zu arbeiten. Warum das Einbinden als img-Element aber Probleme machen soll, ist für mich nicht ganz verständlich, allerdings vorstellbar.

Wenn die SVG über das img-Element eingebunden wird, wird das eingebettete JavaScript nicht ausgeführt. Das könnte hier ein Problem darstellen. Auch „von außen“ kommt man da nicht ran.

Gruß
Julius

[Richard Rüfenacht]

Hallo Richard Julius

Wenn die SVG über das img-Element eingebunden wird, wird das eingebettete JavaScript nicht ausgeführt.

Nein, das trifft nicht zu wenn die Scripte richtig eingesetzt werden, aber es kann Probleme mit dem Namensraum geben.

Mit besten Grüssen
Richard

[Julius]

Hallo Richard,

Wenn die SVG über das img-Element eingebunden wird, wird das eingebettete JavaScript nicht ausgeführt.

Nein, das trifft nicht zu wenn die Scripte richtig eingesetzt werden, aber es kann Probleme mit dem Namensraum geben.

Was ist dann in diesem Experiment schief gelaufen (die SVG habe ich aus dem Wiki zusammenkopiert)?

<svg viewbox="0 0 150 150" xmlns="http://www.w3.org/2000/svg" onload="document.getElementById('text2').textContent='Hallo!';">
    <defs>
      <!-- der Script Bereich -->
      <script type="text/javascript">
      <![CDATA[
document.addEventListener("DOMContentLoaded", function () {
	function aenderung() {
		var farben = new Array("red", "skyblue", "#dfaa20", "#ebf5d7", "#e4ebf2",
			"#5a9900", "lime", "#df6c20", "brown", "#5c82d9", "burlywood",
			"blueviolet", "#c32e04", "#ffebe6", "#5c82d9");
		var fuellFarbe = Math.floor(farben.length * Math.random());
		if (fuellFarbe == farben.length) {
			fuellFarbe = farben.length - 1;
		}
		fuellFarbe = farben[fuellFarbe];
		document.getElementById("kreis").setAttribute("fill", fuellFarbe);
	}
	document.getElementById("kreis").addEventListener("click", aenderung);
	document.getElementById("text").addEventListener("click", aenderung);
});
      ]]>
      </script>
    </defs>
    <circle id="kreis" cx="100" cy="100" r="70" fill="#dfac20" />
    <text id="text" x="100" y="100">Klick mich!</text>
    <text id="text2" x="100" y="140"></text>
</svg>

Stand-Alone funktioniert es nämlich, so aber nicht:

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
  </head>
  <body>
<img src="javascript.svg" alt="">
  </body>
</html>

Gruß
Julius

[Richard Rüfenacht]

Hallo Julius

Stand-Alone funktioniert es nämlich, so aber nicht:

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
  </head>
  <body>
<img src="javascript.svg" alt="">
  </body>
</html>

Wie greift javascript.svg auf welches JavaScript zu?

Mit besten Grüssen
Richard

[Julius]

Hallo Richard,

Wie greift javascript.svg auf welches JavaScript zu?

In javascript.svg ist ein Script enthalten, welches ausgeführt wird, wenn die SVG direkt im Browser angezeigt wird, aber nicht, wenn sie über das img-Element eingebunden ist.

Gruß
Julius

[Richard Rüfenacht]

Hallo Julius

In javascript.svg ist ein Script enthalten, welches ausgeführt wird, wenn die SVG direkt im Browser angezeigt wird, aber nicht, wenn sie über das img-Element eingebunden ist.

Wenn die SVG-Grafik im img-Element eingebunden wird, existieren zwei Namensräume, darauf habe ich schon hingewiesen.

Mit besten Grüssen
Richard

[Julius]

Hallo Richard,

In javascript.svg ist ein Script enthalten, welches ausgeführt wird, wenn die SVG direkt im Browser angezeigt wird, aber nicht, wenn sie über das img-Element eingebunden ist.

Wenn die SVG-Grafik im img-Element eingebunden wird, existieren zwei Namensräume, darauf habe ich schon hingewiesen.

Aber woher soll die javascript.svg (bzw. das enthaltene JavaScript) denn wissen, dass sie über img-Element eingebunden wurde und nicht stand-alone ausgeführt wird?

Gruß
Julius

[Richard Rüfenacht]

Hallo Julius

Aber woher soll die javascript.svg (bzw. das enthaltene JavaScript) denn wissen, dass sie über img-Element eingebunden wurde und nicht stand-alone ausgeführt wird?

Diese Frage meinst du nicht wirklich ernsthaft?

Einerlei: Der SVG-Grafik ist das egal, nicht aber dem darin befindlichen JavaScript, das muss wissen, ob es im SVG-Raum ausgeführt werden soll oder wo anders.

Mit besten Grüssen
Richard

[Matthias Scharwies]

Servus!

Hallo Julius

Aber woher soll die javascript.svg (bzw. das enthaltene JavaScript) denn wissen, dass sie über img-Element eingebunden wurde und nicht stand-alone ausgeführt wird?

Diese Frage meinst du nicht wirklich ernsthaft?

Einerlei: Der SVG-Grafik ist das egal, nicht aber dem darin befindlichen JavaScript, das muss wissen, ob es im SVG-Raum ausgeführt werden soll oder wo anders.

Das Problem, wie Rainer der 2. hier schon aufwarf ist, das SVG einerseits ein Grafikformat beschreibt, die man als Bild in Webseiten einbindet, und man andererseits mit SVG eine XML-Auszeichungssprache hat, die sogar selbst ausführende Skripten integriert.

Bei meinen Versuchen im Wiki stieß ich irgendwann an eine Mauer: Man kann JavaScript in Standalone-SVGs ausführen, noch besser als inline-SVG.

Theoretisch ist es möglich SVG in mit object und iframe-eingebundenen OBjekten auszuführen, wenn die Namensräume beachtet werden. Wiki-Kapitel: Ansprechen von SVG-Elementen in externen Dateien . Praktisch kam ich da nicht weiter, und hatte noch soviel anderes zu tun.

Bei der Einbindung als img gelten aber einige Beschränkungen:

• MDN: SVG as an Image
  • kein Ausführen von JS
  • kein Laden weiterer externer Ressourcen wie Stylesheets, Bilder oder weiterer Scripts

Das ist auch das Problem mit SVG im Wiki und anderen CMS, wie Wordpress, die einfach Angst vor den Möglichkeiten von SVG haben.

Vielleicht gibt es irgendwann ein stadardisiertes "Sanitizing" von SVG-Code, der dann ungefährliche SVGs produziert, die man überall einbinden darf. Das mit SVG 2 begonnene Auslagern der Präsentations-Attibute in CSS-Module ist da vielleicht ein erster Schritt hin zu einer reinen Untermenge graphischer Auszeichnungselemente innerhalb von HTML5.

Herzliche Grüße

Matthias Scharwies

[Julius]

Hallo Matthias,

Bei der Einbindung als img gelten aber einige Beschränkungen:

• MDN: SVG as an Image
  • kein Ausführen von JS
  • kein Laden weiterer externer Ressourcen wie Stylesheets, Bilder oder weiterer Scripts

Genau darauf wollte ich hinaus, hätte ich mal einen Blick ins Wiki geworfen...

Das ist auch das Problem mit SVG im Wiki und anderen CMS, wie Wordpress, die einfach Angst vor den Möglichkeiten von SVG haben.

Genau über diese Schiene bin ich auch darauf gestoßen.

Vielleicht gibt es irgendwann ein stadardisiertes "Sanitizing" von SVG-Code, der dann ungefährliche SVGs produziert, die man überall einbinden darf. Das mit SVG 2 begonnene Auslagern der Präsentations-Attibute in CSS-Module ist da vielleicht ein erster Schritt hin zu einer reinen Untermenge graphischer Auszeichnungselemente innerhalb von HTML5.

Sanitizing funktioniert wohl nicht so wirklich, weil man da theoretisch immer etwas übersehen kann – Von den Lösungen, die ich gesehen habe, waren alle mit dem Vermerk „Absolut sicher ist es garantiert nicht“ versehen. Es sollte da eher ein Attribut geben, was Browser dazu bringt, unsichere Inhalte zu blocken, eine Art „Safe-Mode“ also. Problem wird wohl sein, dass man dafür sorgen muss, dass ältere Browser (bzw. welche, die diesen Modus nicht beherrschen) diese Grafik garantiert nicht darstellen, sonst ist das Attribut für die Katz.

Gruß
Julius

[Detlef Mietke]

Hallo Richard,

SnapSVG funktioniert (wie ich bislang feststellen konnte) ebensogut mit relativen Einheiten. Die Werte der viewBox stehen ohne Einheiten und verhalten sich beim internen automatischen skalieren als hätten sie die Einheit Pixel. Das war das Ergebnis, das ich mit max-width: ... wo die Angabe der Einheit notwendig für den SVG tag hatte. Dort relative Angaben zu nutzen funktioniert natürlich, aber der Vergrößerungsfaktor der SVG im Layout der Webseite ist dann nicht so leicht auf "1" zu bekommen.

Meine Fragen zu diesem Thema sind hier im Forum ausführlich beantwortet worden - vielen Dank allen Mitwirkenden.

Mit freundlichen Grüßen Detlef

[Kackfohgel]

Glück auf Detlef!

Optimal wäre es, wenn bei großem Viewport die Originalgröße der SVG-Grafik angezeigt und nur beim Verkleinern des Viewports proportional skaliert wird (responsiv).

Mit max-width= 100% kannst du erreichen, dass das Bild max die Breite des umschließenden Blocks in Anspruch nimmt. Somit wird das Bild zwar verkleinert, wenn es größer als der umschließende Block ist, aber keinesfalls vergrößert, wenn es kleiner als dieser ist.

Kackfohgel

[Kackfohgel]

Nach langer Zeit - scheinbar zu lange - mal wieder vorbeigeschaut und etwas den Überblick verloren. Hatte nur die aktuelle Antwort bzw. den daraus entstandenen Thread von Matthias Scharwies gelesen; das bereits max-width eingebracht wurde, habe ich überlesen. Bitte entschuldigt dies.