SVG-Asset- & Sicherheitsrichtlinie

1. Zweck

Dieses Dokument legt die technischen Standards, Performance-Vorgaben und Sicherheitsregeln für skalierbare Vektorgrafiken (SVG) fest, die auf aikitext.com gerendert und bereitgestellt werden. Alle Inline- und externen SVG-Elemente müssen diese Richtlinien strikt einhalten, um optimale Ladezeiten und vollkommenen Schutz vor Cross-Site-Scripting (XSS) zu gewährleisten.

2. Sicherheitsregeln (Sanitization)

Aufgrund der XML-Struktur von SVGs kann nicht vertrauenswürdiger Vektor-Code beliebiges JavaScript ausführen. Alle auf aikitext.com hochgeladenen oder bereitgestellten SVG-Dateien müssen folgenden Vorgaben entsprechen:

• VERBOTEN Keine Inline-Skripte: <script>-Tags sind strengstens untersagt und werden automatisch entfernt.
• VERBOTEN Keine Event-Handler: Inline-JavaScript-Events wie onload, onclick oder onerror sind nicht gestattet.
• VERBOTEN Keine Foreign Objects: <foreignObject>-Elemente werden blockiert, um die Injektion von HTML-Inhalten zu verhindern.
• VERBOTEN Keine externen XML-Entitäten: DTD-Deklarationen und externe Entitätsreferenzen (XXE-Angriffe) müssen entfernt werden.
• ERFORDERLICH Sanitization-Engine: Alle von Nutzern hochgeladenen oder dynamischen SVGs müssen vor dem Rendern durch DOMPurify oder einen gleichwertigen serverseitigen Parser bereinigt werden.

3. Optimierung & Formatierungsstandards

Um eine hohe Performance auf Desktop- und Mobilgeräten zu gewährleisten:

• SVGO-Verarbeitung: Alle SVG-Assets müssen mit SVGO minimiert werden, um Metadaten aus Grafikprogrammen (z. B. Adobe Illustrator, Figma-Ebenengruppen) zu entfernen.
• Dimensionen & ViewBox: Definieren Sie immer ein gültiges viewBox-Attribut (z. B. viewBox="0 0 24 24") und vermeiden Sie feste width- oder height-Attribute, außer wenn sie für spezielle responsive Container benötigt werden.
• Styling-Protokoll: Verwenden Sie saubere CSS-Variablen (z. B. fill="currentColor") für Icons, um nahtlose Theme-Anpassungen (Light/Dark Mode) zu ermöglichen.

4. Bereitstellung & Einbindung

• UI-Icons: Binden Sie kleine Interface-Icons inline über Component-Frameworks oder als SVG-Sprite-Map ein, um eine effiziente Zwischenspeicherung (Caching) zu ermöglichen.
• Inhaltsgrafiken: Binden Sie größere illustrative SVGs über <img src="dateiname.svg" /> ein, um die Grafik in einem isolierten Kontext (Sandboxing) auszuführen, in dem die Skriptausführung standardmäßig deaktiviert ist.
• HTTP-Header: Ausgelieferte SVG-Dateien müssen den Header Content-Type: image/svg+xml sowie entsprechende Sicherheits-Header setzen (Content-Security-Policy: default-src 'none').