KLXM Studio – Startseite
Kontakt aufnehmen

Demo · SVG in der Mediathek

Vektorgrafik, gestochen scharf.

SVG-Dateien bleiben auf jedem Bildschirm scharf und sind oft nur wenige Kilobyte groß. Weil SVG aber auch Skripte und Verweise enthalten kann, bereinigt KLXM Studio jede Datei beim Hochladen.

Beispiel

Eine Illustration als SVG

Eigene Demo-Illustration, rund 2 KB – vergrößern Sie sie per Klick: keine Treppchen, keine Unschärfe.

  • Illustration: flache Landschaft mit Windmühle, Fluss, Pappeln und tief stehender Sonne – vergrößern
    Niederrhein – Windmühle, Pappeln, Fluss (SVG, eigene Illustration)

Bereinigung

Was beim Hochladen herausfliegt

Eine absichtlich präparierte Testdatei (nicht hochgeladen, nur zum Zeigen) – links wie eingereicht, rechts wie KLXM Studio sie speichern würde.

  • Eingereicht

    Skript, onload, javascript:-Link, eingebettetes iframe, externes Bild, CSS-behavior, Animation, Editor-Daten und eine externe Entity.

    test.svg
    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg [ <!ENTITY x SYSTEM "file:///etc/passwd"> ]>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="200" height="200" onload="alert('onload')">
  <metadata>Editor-Daten</metadata>
  <script>alert('script')</script>
  <a xlink:href="javascript:alert('link')"><circle cx="100" cy="100" r="80" fill="#581D47" inkscape:label="Kreis"/></a>
  <foreignObject width="200" height="200"><iframe xmlns="http://www.w3.org/1999/xhtml" src="https://example.com/"></iframe></foreignObject>
  <image href="https://example.com/tracker.png" width="1" height="1"/>
  <rect x="60" y="60" width="80" height="80" fill="#EDE9E3" style="behavior:url(x.htc)"/>
  <animate attributeName="fill" to="red" dur="1s"/>
</svg>

  • Gespeichert

    Übrig bleiben Kreis und Quadrat: 844 B → 201 B, 7 unsichere Elemente entfernt.

    test.svg
    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="80" fill="#581D47"/>
<rect x="60" y="60" width="80" height="80" fill="#EDE9E3"/>
</svg>

So funktioniert’s

Positivliste statt Hoffnung.

  • Neu aufgebaut

    Die Datei wird als neues Dokument aufgebaut – nur erlaubte Elemente und Attribute kommen mit. Skripte, on…-Attribute, foreignObject, externe Verweise und Animationen nicht.

  • Optimiert

    Editor-Daten, Kommentare und ungenutzte Definitionen fallen weg, Zahlen werden gekürzt; title, desc und ARIA bleiben für die Barrierefreiheit.

  • Doppelt abgesichert

    Ausgeliefert wird SVG als Bild (<img>), dazu strenge Kopfzeilen beim direkten Aufruf. Eingebettete Pixelbilder lehnt der Upload ab.

Weitere Demos

Noch mehr ausprobieren.

Alle Beispiele auf einen Blick – mit Demo-Daten, die Sie gefahrlos ausprobieren können.

Alle DemosTutorials