SVG-Grafik und PHP (Generator)

A

Alice

Erfahrenes Mitglied
Hallo. :)

Ich arbeite aktuell an einem Verkehrsschilder Generator. :D

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?
 
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
 
Zuletzt bearbeitet:
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)
 
Zuletzt bearbeitet:
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
 
Zuletzt bearbeitet:
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.
Zum Vergrößern anklicken....

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.
 
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
 
Zuletzt bearbeitet:
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. :)
 
Codebeispiel SVG mit php vermischt:
PHP: 
<?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
 
Zuletzt bearbeitet:
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?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück