SVG-Pfeil

Webdesign & Technik Software & Hardware
1

Heyho,

kann mir jmd helfen?
ich brauche einen SVG-Pfeil, allerdings habe ich absolut 0 erfahrung mit SVG… mein erster versuch sah in etwa so aus:

[code]

Ebene 1 [/code]

bis ich gemerkt habe, dass ich die fläche zwischen den linien die die spitze bilden ja gar nich füllen kann :smiley: :ps:

kann mir jmd helfen?
ich hab ein paar einfache online-wysiwyg-editoren ausprobiert, aber das hat auch nicht wirklich hingehauen :smiley:

hintergrund sollte - wie schon vermutet :slight_smile: #3399AA sein, die form stimmt an sich schon mal visuell eingermaßen, auch wenn mans vermutlich ganz anders angehen müsste…

Danke im Voraus!
emil

2

svg sollte man imho nicht mit der Hand machen… ist zwar ne nette Erfehrung, aber im endeffekt viel zu komplex, je größer das Bild…
probier doch mal das opensource tool Inkscape.
Ich hab damit recht gute Erfahrungen gemacht.

edit: :ps: http://balmung.square7.ch/other/other/pfeil.svg

3

So funktioniert es:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com"> <g> <title>Ebene 1</title> <rect fill="#3399AA" stroke="#000000" stroke-width="5" x="100" y="150" width="50" height="100" id="svg_3"/> <polygon points="50,150 200,150 125,75" fill="#3399AA" stroke="#000000" stroke-width="5"/> </g> </svg>

Für die direkte Anzeige im FF einfach folgendes in die Eingabezeile schreiben:

4

spitze, danke!

5

Inkscape und Konsorten blähen den Quelltext immer stark auf, das
ergibt dann auch bei trivialen Inhalten wie einem Pfeil große und
nicht direkt verständliche Dateien.
Die allermeisten SVG habe ich bislang mit einem Texteditor
geschrieben, wie auch XHTML-Dateien, geht problemlos.
Dazu kommt, daß viele Anwendungen ohnehin PHP-Skripte sind,
die SVG erzeugen, da kommt man mit Inkscape nicht ganz weit ;o)
Inkscape hat zwar auch seinen nutzen, aber inzwischen wende ich
auf eine von Inkscape erzeugte Datei ein eigenes Optimierungskript
an und danach dann noch scour. Und dann bleibt immer noch
einiges an Handarbeit, bis man das internet-tauglich veröffentlichen
kann ;o)

Und wozu soll bei den Beispielen der Namensraum von google
gut sein? Was soll das?

SVG an sich ist recht einfach, gerade für so einfache Objekte.
Beim Pfeil sollte man aber wissen, wohin der zeigen soll und wo
er platziert werden soll (wenn man den Pfeil bei 0 beginnen läßt
und nach rechts zeigen läßt, kann man den mit dem Attribut
transform recht einfach drehen, skalieren und positionieren).

Ohne mir das jetzt graphisch angeguckt zu haben, so aus dem
Ärmel z.B.:

<path d="M0,0 100,0M50,20 100,0 50,-20" 
         stroke-width="5" stroke="black" 
         stroke-linejoin="round"
         stroke-linecap="round" 
         fill="none"
         transform="rotate(17)" />

Für Markierungen pappt man das in einen marker und wendet
den dann auf eine Graphik an, wird dann bei Bedarf automatisch
passend ausgerichtet, da braucht es also keine Drehung oder
Positionierung.

6

Naja, mit Inkscape kann man die Dokumente auch als „Normale SVG“ abspeichern (was ich in dem Beispiel nicht gemacht hatte). Somit fallen dann die ganzen sodipodi und Inkscape namespaces weg, die für die Anzeige nicht relevant sind.
Für so ein kleines Objekt ist die Nutzung von Inkscape wohl schon ein bisschen übertrieben… Zumindest eine nachträgliche Bearbeitung um überflüssige daten zu entfernen wäre sicherlich nicht verkehrt.
Wenn es allerdings sehr komplex wird, ist eine manuelle Bearbeitung nahezu unmöglich: z.B. das oder das

[size=85]Ob das ganze Internet tauglich sein soll kann man nur vermuten, da der Threadersteller nichts dergleichen gesagt hat.[/size]

7

hab mich jetzt wohl oder übel doch n bisschen in svg eingelesen - is ja im prinzip einfaches xml…

und ich bin zu dem schluss gekommen, dass die eine zeile code (bei mir warns wirklich nich viel mehr :ps: ) durchaus mit nem editor gemacht werden kann…

@hoffmann: der pfeil sollte (wie im beispiel) nach oben zeigen und ist recht einfach gestaltet… wie gesagt, habe es jetzt hinbekommen…
was den google-teil angeht: das beispiel von mir zumindest war mit nem online-tool von google geschrieben also schulterzuck

@balumung: respekt, das’s mal geil :stuck_out_tongue:

8

Balmung - ich denke, die Beispiele sind auch mit inkscape nicht
einfach zu erstellen und erfordern viel Kleinarbeit.
Auch das Aufräumen und Optimieren solcher Dateien macht dann
regelmäßig viel Freude - ich habe das bei einigen Bildern gemacht,
die ich habe vektorisieren lassen (potrace ist ja auch in inkscape
eingebaut). scour kann da auch nur teilweise helfen, denn das ist
vorsichtig und rundet nicht, Jeff Schiller mag das nicht riskieren,
weil das Skript ja nicht versteht, was relevante Information ist.
Mit scour und einem eigenen Skript habe ich da öfter schon mehr
als einen Faktor 10 an Größenreduzierung erreicht, obgleich ich
zusätzlich dann noch title und desc und ähnliche
Zugänglichkeitshilfen und Alternativen eingebaut habe.

emil93 - die Namensräume von google oder inkscape etc sind
für eine Veröffentlichung im internet oder eine anderweitige
Verwendung als mit diesen Programmen komplett redundant.
Allerdings mag es dem Editor helfen, wenn man versucht, etwas
nachzubearbeiten. Besonders bei inkscape kann das Informationen
zu komplexeren Formen enthalten, die in SVG nur als allgemeine
Pfade realisierbar sind. An den Zusätzen von inkscape kann man
dann leichter erkennen, was für ein Typ von Figur durch den
Pfad repräsentiert wird, wobei dies aber immer unabhängig von
der graphischen Darstellung des Pfades ist. Das ist also nur ein
informativer Zusatz im Quelltext.
Sowas wie se:connector=“svg_4 svg_3” ist allerdings nicht
besonders erhellend - Verbindung zwischen den beiden
angegebenen Elementen?
Leider gibt es da noch keinen schönen Standard für
Metainformationen über Graphik, zwar kann man das formal alles
mit RDF(a) angeben, besser jedenfalls als mit solchen Attributen
aus eigenen Namensräumen, es hat sich da aber leider noch kein
einheitliches Format etabliert.

9

[quote=“hoffmann”]Balmung - ich denke, die Beispiele sind auch mit inkscape nicht
einfach zu erstellen und erfordern viel Kleinarbeit.[/quote]
stimmt schon… saß ne menge Stunden dran :smiley: