# SVG-Grafik und PHP (Generator)



## Alice (15. Juli 2011)

Hallo. 

Ich arbeite aktuell an einem Verkehrsschilder Generator. 

Ich möchte mit wenigen Klicks und eingaben Verkehrschilder in bestmöglicher Qualität generieren können. Also alles mögliche was es an Verkehrszeichen gibt.

Mit einfachen JPEG oder PNG Grafiken funktioniert das auch bestens nur habe ich das Problem das die Abstände (da Pixelformat) nicht 100% Originalgetreu sind und das merkt man. Die Qualität ist auch nicht so gut.

Meine Idee:
Alle Buchstaben, Zahlen und Symbole als SVG-Datei bereit stellen und das Verkehrszeichen in Originalgrösse (im Hintergrund) erstellen, in die richtige Grösse (verschiedene) bringen und als Pixelgrafik speichern.

Die Buchstaben, Zahlen und Symbole sind kein Problem. Ich habe schon fast alle erstellt, nur mit der Umsetzung (PHP) funktioniert das überhaupt nicht.

Die SVG-Grafiken müssen je nach eingabe an bestimmte Positionen eingebaut werden. Nur wie?

Je nach eingabe soll zuerst das Haupt-Verkehrszeichen (z.B. Autobahnschild) geladen werden. Anschliessend sollen die einzelnen Buchstaben, Zahlen und Symbole in perfekter Position in das Haupt-Verkehrzeichen kopiert werden. Die Abstände zwischen den einzelnen Grafiken müssen jedoch auch im Komma Bereich möglich sein.

A B (Abstand zwischen A und B ist 32,5 mm)

Wie kann ich so etwas am besten realisieren?

Wie bringe ich PHP dazu, mehrere SVG-Grafiken zu laden (vom Webserver) und diese in eine andere SVG-Grafik zu kopieren?


----------



## chibisuke (15. Juli 2011)

Guck dir dazu am besten mal ImageMagick an, das müsste meines wissens auch mit SVG umgehen können und kann über ein PECL modul ohne probleme von PHP aus benutzt werden.

http://php.net/manual/en/book.imagick.php


----------



## chmee (15. Juli 2011)

Du kannst doch SVG auch per DOM ansprechen und Objekte per JS importieren. (Ob nun php oder nicht ist doch für das Projekt egal..) Weiterhin ist SVG vektorbasierend und das Maß kannst Du selbst bestimmen. Zu guter Letzt ist das letztendliche Ausgabemaß auch egal, denn Du kannst das SVG (wenn fertig) als Download anbieten und zB in Illustrator als Vektordatei öffnen, was Qualitätsprobleme vermeidet. Ich sehe grad nicht das Problem..

http://de.wikipedia.org/wiki/Scalable_Vector_Graphics
http://svg.tutorial.aptico.de/

mfg chmee


----------



## Alice (18. Juli 2011)

Hallo. 

Ich habe glaube ich meine Frage leider nicht so gut formuliert.

Ich habe ein paar Buchstaben, Zahlen und Symbole vektorisiert. Ist zwar nicht so gut geworden wie erwartet aber immerhin.

Nun möchte ich mit PHP ein Formular erstellen wo man verschiedene einstellungen vornehmen kann wie z.B. einen Text wie "120 Km/h" der dann später auf dem Schild stehen soll. Die einzelnen Buchstaben, Zahlen und Symbole sind als SVG-Dateien auf dem Server.
Das Formular (welches der User sieht, Berechnungen (Abstände), Farben usw. sollen mittels PHP berechnet und ausgewertet werden. Das sollte kein Problem sein.

Nur wie stelle ich es nun an, dass die SVG-Dateien (Beispiel: 120 Km/h) in eine andere (Haupt SVG-Datei) kopiert werden und so ein richtiges Verkehrszeichen entsteht?

http://www.abload.de/image.php?img=dfgfgdfppqd.png

Mit einfachen JPEG-Grafike (wie im Link oben) funktioniert das Einwandfrei aber die Qualität ist schlecht und man kann nur eine Grösse erstellen. Deswegen möchte ich es nun mit SVG-Dateien machen, da man damit einfach mehr möglichkeiten hat.

- Bessere Qualität
- verschiedene Grössen möglich
- Ein Buchstabe, Zahl oder ein Symbol kann mit einer kleinen Veränderung in verschiedenen Farben angezeigt werden (Einfarbig)


----------



## chmee (18. Juli 2011)

SVG ist eine Beschreibungssprache. Ein Pfeil in SVG besteht wohl aus 7 verbundenen Punkten, die ein gefülltes Polygon beschreiben. Nun nimmt man die SVG, die als Hintergrund fungiert und packt diese eine Zeile des Pfeiles dort rein. Ich denke schon, dass ich es richtig verstanden habe, ich habe leider das Gefühl, dass Du SVG noch nicht wirklich kennengelernt hast.. Dein Bildbeispiel beschreibt es richtig, nur dass Du unter SVG auch nicht mehr an Auflösungen und Bildhintergrundfarben denken musst. Alles viel einfacher.

mfg chmee


----------



## Alice (18. Juli 2011)

chmee hat gesagt.:


> Dein Bildbeispiel beschreibt es richtig, nur dass Du unter SVG auch nicht mehr an Auflösungen und Bildhintergrundfarben denken musst. Alles viel einfacher.


 
Vielleicht bin ich heute einfach nicht gut drauf aber ich verstehe jetzt nicht genau was du meinst.

Ist meine Idee, das Projekt mit SVG-Dateien zu realiseren, deiner Meinung nach Schrott oder doch eher gut?

Die Verkehrszeichen sollen im Hintergrund (beim Generieren) im Maßstab 1:1 erstellt werden und nie als SVG-Datei ausgegeben werden. Das Endprodukt, soll immer in ein Pixel-Format umgewandelt werden mit einer bestimmten Maximalgrösse wie z.B. 500px (Höhe).

Abgesehen davon, dass SVG für mich ganz neu ist, habe ich auch keine Ahnung wo ich starten soll. Finde leider auch kein gutes Beispiel was im Idealfall sogar etwas ähnliches beschreibt, was ich vorhabe.


----------



## chmee (18. Juli 2011)

Nein, die Idee ist absolut ok. Dadurch, dass SVG vektorbasierend ist, kannst Du die Ausgabegröße beliebig einstellen.

Ich habe SVG kennengelernt, als wir hier ein Rätsel gemacht haben, das eigentliche Rätsel war die Berechnung von Flugrouten, aber die Ausgabe haben wir mittels SVG gemacht.

Hier die Aufgabe: http://www.tutorials.de/archiv/348207-quiz-10-einmal-ueber-den-atlantik-und-zurueck.html
Und hier zB meine Umsetzung mittels php und SVG: http://www.tutorials.de/archiv/348213-quiz-10-chmee-php.html

(Achso, Nachtrag  - Man müsste die Umwandlung SVG2JPG über ImageMagick machen, oder einfach SVG ausliefern)

mfg chmee


----------



## Alice (18. Juli 2011)

Mit ImageMagick habe ich bereits ein bisschen gearbeitet. Eigentlich eine ganz tolle Sache aber leider zu schlecht dokumentiert.

Hättest du denn einen Vorschlag (Code) für mich, wie ich 3 oder mehr SVG-Dateien für den moment verschmelze um ein Verkehrszeichen zu erstellen? Am besten mit PHP.


----------



## chmee (19. Juli 2011)

Codebeispiel SVG mit php vermischt:

```
<?php header("Content-type: image/svg+xml"); 
echo '<?xml version="1.0" ?>'; 
?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    width="512" height="512" stroke="red" fill="none"
    viewBox="-100 -100 100 100" stroke-width="0.3">
   
    <defs>
        <g id="pfeil">
            <path d="M-10 -50 L-10 40 L-30 40 L0 70 L30 40 L10 40 L10 -50 Z"/>
        </g>
    </defs>
 
    <circle cx ="0" cy ="0" r ="48" style="stroke:blue;stroke-width:0;fill:blue;" transform="translate(-50 -50)"/>

	<?php
	# -- 8fache wiederholung inklusive rotation in weiss--
	for($i=0;$i<360;$i+=45)
	{ 	echo "\t";
		echo '<use xlink:href="#pfeil" transform="translate(-50 -50) scale(0.6) rotate('.$i.')" style="stroke:white;stroke-width:0;fill:white;" />';
		echo "\r\n";
	}
	?>

    <use xlink:href="#pfeil" transform="translate(-50 -50) scale(0.6) rotate(90)" style="stroke:white;stroke-width:0;fill:red;" />

</svg>
```
Copy/Paste, Speichern als zB Pfeil.php 

Nun hast Du alle Möglichkeiten der php-Welt, diese Bildteile zusammenzulegen. Nachladen, importieren, wie auch immer Du es realisieren möchtest. mein Tip: Lege alle "potentiellen" Symbole als Defs an, somit musst Du 1x als Def importieren und beim zweiten Schritt psoitionieren, skalieren und drehen. Übrigens kann SVG auch mit Text umgehen, Du musst also nicht Buchstabe für Buchstabe zusammenstecken - Du suchst einen Typokonverter und hast alle Zeichen im Zugriff. Man könnte weiter optimieren und alle möglichen Symbole als Tastaturzeichen definieren, somit verteilst Du eigentlich nur noch Text auf der SVG-Ebene..

Naja, das ist jetzt Dein Part  Viel Erfolg.

Link - http://www.selfsvg.info/?toc und http://www.selfsvg.info/?section=5.6

mfg chmee


----------



## Alice (19. Juli 2011)

Das ist mal ein richtig gutes Beispiel. 

Vielen Dank dafür. 

Könntest du mir evtl. als zweite Starthilfe noch zeigen wie man das Ergebnis als SVG-Datei und/oder als PNG speichert?


----------



## chmee (19. Juli 2011)

Als SVG speichern ist nicht das Problem..
(Du lieferst die gleiche Seite mit einem anderen php-Header aus, nur, damit der Browser sagt, er soll sie speichern anstatt zu zeigen.)

Die Wandlung von SVG nach PNG gestaltet sich n bissel komplexer - wie oben schon beschrieben - und da bitte ich Dich nun, selbst nach Lösungen zu suchen, da wird es mit Sicherheit einige Dinge zu geben..

mfg chmee


----------



## Alice (19. Juli 2011)

Vielen Dank erst einmal für die ganzen antworten. 

Habe bereits einiges hinbekommen und verstehe jetzt einiges besser wie vorher.

Ich habe nun ein paar Webseiten gefunden die sich mit dem Thema "SVG Speichern" und "SVG zu PNG konvertieren" beschäftigen.

Frage:
Wäre es Sinnvoller die erstellte Grafik als SVG zu speichern und dann in PNG zu konvertieren oder gibt es die Möglichkeit das direkt in PNG zu konvertieren?


----------



## Alice (3. Oktober 2011)

Hallo. 

Leider funktioniert das mit den SVG-Grafiken nicht so wie ich das gerne hätte. Schieben wir PHP erst einmal auf Seite.

Ich habe z.B. diesen Pfad:

```
<path id="rect4495" d="m 467.7165354330709,-272.834670823022 38.976379,0 0,272.83465896484403856447 -38.976379,0 z" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;display:inline" />
```

Aber der Pfad wird NICHT angezeigt. Wenn ich die Datei mit einem SVG-Programm öffne, befindet sich der Pfad irgendwo ausserhalb des Dokumentes.

Ich möchte eigentlich nur alle Grafiken als Defs  anlegen und diese im laufe des Skripts laden. Aber das geht irgendwie nicht. Es fängt ja schon bei der Position an.

Kann mir vielleicht jemand helfen? Eine Starthilfe wäre sehr hilfreich.


----------

