Schnelleinstieg

Diese Seite dient als kurze Einführung und gibt Ihnen einige einfache Richtlinien für die Erstellung von minimalem SVG-Code für Shapes an die Hand.

Minimaler SVG-Code

Der minimale SVG-Code, der für ein Shape erforderlich ist, sieht wie folgt aus:

<svg version="1.1" id="MyShapeType" width="100px" height="100px">
  <!-- Shape definition -->
</svg>

Verwenden Sie das id-Attribut auf dem <svg>-Element, um einen eindeutigen Bezeichner für den Shape-Typ festzulegen. Dieser Wert sollte für jeden Ihrer Shape-Typen einzigartig sein. Stellen Sie dem Bezeichner beispielsweise Ihren Firmennamen voran, z. B. AcmeHeatPump, um Konflikte mit anderen Shape-Typen in der Shape-Bibliothek zu vermeiden. Verwenden Sie nur alphanumerische Zeichen für den Bezeichner und vermeiden Sie Leerzeichen und Sonderzeichen.

Verwenden Sie die Attribute width und height auf dem <svg>-Element, um die Größe des Shapes festzulegen (siehe Shape-Größe definieren).

Kopfzeile entfernen

Da Shapes innerhalb eines Anlagebild-Widgets gerendert werden, sind die XML-Header und die DOCTYPE-Deklaration, die normalerweise am Anfang von SVG-Dateien zu finden sind, nicht erforderlich und können bedenkenlos entfernt werden. Diese Zeilen sind nur notwendig, wenn Sie die SVG-Datei als eigenständige Datei außerhalb des Systems verwenden möchten.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Unnötige Attribute entfernen

Die meisten SVG-Editoren von Drittanbietern fügen unnötige Attribute hinzu, die bedenkenlos entfernt werden können.

<svg version="1.1" width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">

Der oben stehende Code kann folgendermaßen verkürzt werden:

<svg version="1.1" id="MyShapeType" width="100px" height="100px">

SVG-Attribute anstelle von Stilen verwenden

Wenn Sie Ihrem Shape Verhaltensweisen hinzufügen möchten, die das Aussehen des Shapes zur Laufzeit verändern, empfehlen wir die Verwendung von SVG-Attributen (fill, stroke usw.) bei der Gestaltung der einzelnen Elemente, anstatt das Attribut style zu verwenden.

Diese Schreibweise ist erforderlich, damit die entsprechenden Attributnamen in der Auswahlliste Element im Verhaltenseditor unten erscheinen. Es sorgt auch dafür, dass das System die Attribute zur Laufzeit korrekt überschreiben kann.

Rastergröße berücksichtigen

Standardmäßig werden Shapes im Anlagebild an einem Raster von 10 mal 10 Pixeln ausgerichtet. Wir empfehlen daher, Ihre Shapes so zu gestalten, dass sie gut in dieses Raster passen, z. B. durch die Verwendung von Abmessungen, die ein Vielfaches von 10 sind, und durch die Platzierung wichtiger Elemente innerhalb des Shapes an Koordinaten, die ein Vielfaches von 10 sind. Dies stellt sicher, dass die Shapes stets sauber ausgerichtet sind und in Kombination mit anderen Shapes konsistent aussehen.