SVG Shapes

Übersicht

Hilfreiches Fundstück aus dem Netz:

SHAPES

Eine Auflistung universeller Shapes, deren Code mit einem einfache Klick kopiert werden kann.

Die Verwendung: ist einfach: Shape wählen...

Der SVG-Code ist nun im Clipboard...
Der Code ist somit transparent und kann hinsichtlich Sicherheitsrisiken validiert werden.

<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"> 
<g clip-path="url(#clip0_231_713)"> 
<path fill-rule="evenodd" clip-rule="evenodd" d="M90 32V3.93402e-06H32L5.69126e-06 0L0 22.6274L5.69126e-06 32V90H32V54.6274L63.1319 85.7593L77.3726 100L63.1319 114.241L32 145.373L32 110L1.099e-05 110L1.02983e-05 168L5.9827e-06 200L22.6274 200L32 200H90V168H54.6274L85.7593 136.868L100 122.627L114.241 136.868L145.373 168H110L110 200H168L200 200L200 177.373L200 168L200 110L168 110V145.373L136.868 114.241L122.627 100L136.868 85.7593L168 54.6274L168 90H200L200 32V5.69126e-06L177.373 0L168 4.2925e-06L110 0V32L145.373 32L114.241 63.1319L100 77.3726L85.7593 63.1318L54.6274 32L90 32Z" fill="url(#paint0_linear_231_713)"/> 
</g> 
<defs> 
<linearGradient id="paint0_linear_231_713" x1="14" y1="26" x2="179" y2="179.5" gradientUnits="userSpaceOnUse"> 
<stop stop-color="#E9B8FF"/> 
<stop offset="1" stop-color="#F9ECFF"/> 
</linearGradient> 
<clipPath id="clip0_231_713"> 
<rect width="200" height="200" fill="white"/> </clipPath> 
</defs> 
</svg>

Den Code in eine Datei mit der Endung "SVG" speichern...

"shape.svg"

Fertig! Nun kann der Shape eingebunden werden.

Vielen Dank an Monika Michalczyk !

Achtung Sicherheitsrisiken!

Das Einbinden von SVG-Dateien auf Websites birgt potenzielle Sicherheitsrisiken. SVG-Dateien können Skripte enthalten, die beim Rendern der Grafiken ausgeführt werden, was zu Sicherheitslücken führen kann, wenn bösartiger Code in einer SVG-Datei enthalten ist. Es ist wichtig, beim Einbinden von SVG-Dateien bestimmte Vorsichtsmaßnahmen zu beachten, um potenzielle Sicherheitslücken zu vermeiden. Hier sind einige wichtige Punkte:

1. Validierung: Überprüfen Sie die SVG-Dateien auf Validität, um sicherzustellen, dass sie den SVG-Spezifikationen entsprechen. Verwenden Sie validierende Parser oder Online-Tools, um sicherzustellen, dass die Dateien korrekt sind und keine unerwarteten Inhalte enthalten.

2. Filterung von Benutzereingaben: Wenn Ihre Website Benutzereingaben enthält, z. B. das Hochladen von SVG-Dateien, sollten Sie eine gründliche Überprüfung und Filterung durchführen. Entfernen Sie potenziell schädlichen Code und überprüfen Sie, ob die Datei den erwarteten Inhalt und das erwartete Format hat.

3. Content Security Policy (CSP): Implementieren Sie eine Content Security Policy, die die Ausführung von JavaScript-Code in SVG-Dateien einschränkt. Mit einer CSP können Sie genau festlegen, von welchen Quellen Ressourcen geladen werden dürfen, einschließlich Skripten.

4. Sandboxing: Betrachten Sie das Einbinden von SVG-Dateien in einem separaten, isolierten Sandbox-Container. Dadurch können potenziell schädliche Operationen oder Auswirkungen auf den Hauptteil der Website begrenzt werden.

5. Aktualisierungen: Halten Sie Ihre Software und Bibliotheken auf dem neuesten Stand. Aktualisieren Sie regelmäßig Ihre SVG-Parser und andere verwendete Tools, um von den neuesten Sicherheitsverbesserungen zu profitieren.

6. Begrenzte Berechtigungen: Geben Sie SVG-Dateien nur Zugriff auf die Berechtigungen, die sie zum ordnungsgemäßen Rendern und Funktionieren benötigen. Vermeiden Sie es, ihnen übermäßige Berechtigungen zu erteilen, um unerwünschte Auswirkungen zu vermeiden.

Durch die Beachtung dieser Punkte können potenzielle Sicherheitsrisiken beim Einbinden von SVG-Dateien auf Websites minimiert werden. Dennoch ist es ratsam, die Dateien sorgfältig zu überprüfen und sicherzustellen, dass sie von vertrauenswürdigen Quellen stammen, um das Risiko weiter zu reduzieren.