SVG Dateien

Mit der Zeit werden sich hier wohl immer mehr SVG Dateien ansammeln die ich selbst erstellt habe. Zumindest sollten alle dahingehend funktionieren das sie in einem aktuellen Browser das richtige Ergebnis anzeigen.

Auch wenn einige dieser Dateien nichts weltbewegendes darstellen, werde ich diese doch veröffentlichen, um bestimmmte Vorgehensweisen parat zu haben.

• Symbol für den Einsatz von Ajax Technik
• Hintergrund
• Navigation
• Uhr
• Würfel
• Stop Schild
• Spinnennetz
• RGB Wuerfel
• HSI Farbmodell
• HSL Farbmodell
• HSV Farbmodell
• Farb Filter
• Prsks Animation
• Prsks Aktionskarten
• Prsks Galerie
• Prsks Prämissen
• Das Haus vom Nikolaus
• Slider mit SVG
• Balkendiagramm
• Symbol für einen RSS Feed
• Symbol für mobile Version
• Visitenkarte
• Ausschnitt
• Maske
• Schnee

Parameter

Folgende Parameter werden bei diesen SVG verwendet.

CSS Eigenschaften

Bei der CSS Ampel wird eine CSS Eigenschaft als Parameter übergeben. Falls ein anderer Wert als initial gewünscht wird muss dieser dem Parameter übergeben werden. Sinn des ganzen ist mit @supports zu überprüfen ob die CSS Eigenschaft angewendet werden kann. Die Darstellung entspricht einer Ampel und folgende Ergebnisse sind möglich.

• Grün: Eigenschaft vorwendbar
• Gelb: Eigenschaft verwendbar gilt nur für Eigenschaften mit Präfix
• Rot: Eigenschaft nicht verwendbar

Polygone erstellen

Für die automatisierte Erstellung von Polygonen habe ich dann mehrere Parameter verwendet. Als Ausgabe erhält man die Umsetzung als Pfad und Polygon in einer SVG Datei.

• Für den Parameter anzahl sind Werte von 3 bis 360 möglich. Voreinstellung ist 8.
• Bei dem Parameter grad sollte ein ganzzahliger Wert zwischen 0 und 360 eingegeben werden. Damit verschiebt sich der Winkel des Startpunktes von 0° auf den gewünschten Wert.
• Über den Parameter lange wird die Breite und Höhe der Graphik in Pixel gesteuert. Der Standardwert liegt bei 500.
• Der Initialwert für den Parameter radius liegt bei 48% des Parameter laenge um etwas Rand zu verursachen. Werte in Pixel größer als 100% der laenge werden entsprechend reduziert.
• Über den Parameter ecke wird gesteuert ob die Eckpunkte mit einem Kreis versehen werden. Als Startwert gilt hier 1 Pixel und entspricht 100%. Als Angabe wird ein Prozentwert benötigt um durch Berechnung das Verhältnis zu modifizieren. Um zu erreichen das die Kreise über den doppelten Radius verfügen sollen muss ein Wert von 200 verwendet werden.
• Nun noch der Parameter Stern. Falls dieser gesetzt wird werden doppelt soviel Eckpunkte erzeugt. Dabei wird mit dem Initialwert von 35% jeder zweite Punkt auf den prozentualen Wert des Radius gesetzt. Hier ist wieder eine Angabe in Prozent möglich. Bei Verwendung des Wertes 100 würde man ein Polygon mit 720 Punkten bekommen wenn die maximale Anzahl gesetzt wurde..

Nutzung von Schnittstellen

Spezielle Anwendungen die auf der Nutzung von Schnittstellen auch unter der Bezeichnung API bekannt veröffentliche ich in einem separatem Bereich.

Messen mit Einheiten

Mit SVG Dateien ist es realisierbar mit verschiedenen Einheiten eine Messung vorzunehmen.