HTML Vektorgrafiken darstellen

[cumulonimbus8]

Hallo!

Kurz gesagt - ich verstehe hier gar nichts. Meine Fantasie versagt wozu ich in meiner HTML-Seite eine Vektorgrafik statt einer normalen benötigte. Angeblich sähe das besser aus wenn man die Page zoomt (nur, warum tue ich selbiges, und so extrem?) Mein Chef jedenfalls will, dass ich mich da mal bemühe.

Oder ist (tatsächlich) gemeint eine (Vektor)Grafik als solche ohne Änderung des Page-Darstellungsmaßstabes zu zoomen; wie ich aufschnappte z.B. innerhalb eines Luftbilds zu navigieren - rein, raus, hin und her)?

Ich möchte meine Lage wie der Ochs vorm Scheunentor mal damit vergleichen, dass ich ein simples Bild mit <img> in die Page einbaue, eine SWF aber einen gewissen Codeblock braucht der mir wiederum einige Stellschrauben anbietet.
Falls ich also eine EPS (weil, darauf war der Chef gestoßen) analog zu PNG oder SWF einfach direkt in meine Page einbauen könnte, wie müsste das (Codebeispiel) passieren und wie erfolgt der Umgang damit (SWF z.B. Größenskalierung oder Repeat)?

CN8

 

[Lawnmower]

Mein Chef jedenfalls will, dass ich mich da mal bemühe.

mein Beileid zu so einem Chef

dass ich ein simples Bild mit <img> in die Page einbaue, eine SWF aber einen gewissen Codeblock braucht der mir wiederum einige Stellschrauben anbietet.

in Deutsch?

Falls ich also eine EPS (weil, darauf war der Chef gestoßen) analog zu PNG oder SWF einfach direkt in meine Page einbauen könnte

was nicht gehen wird, kannst es mit SVG probieren aber das können nur moderne Browser darstellen.
Vielleicht hilft das hier ein wenig: http://www.zentralplan.de/?252

 

[BlubbsDE]

SVG ist das Stichwort. Sonst gibts keine Vektorgrafiken, die Browser nativ darstellen können.

.swf ist eine ShockWave Datei. Flash ist das Stichwort. Hat aber nichts mit HTML zu tun.

 

[Nase]

Vektorgrafiken gehen super als .svg und werden wie alle Bilder über <img /> eingebunden. Du musst aber natürlich die Dimensionen immer festlegen. Bei Vektorgrafiken als Hintergrundbilder geht das über background-size im CSS.

Ich benutze momentan ausschließlich .svgs bei meiner Webapp. Insbesondere, weil ich möchte, dass die Grafiken natürlich gezoomt immer noch ordentlich aussehen (z.B. am Tablet). Zum anderen aber auch, weil ich Grafiken an verschiedenen Stellen in verschiedenen Größen einsetzen kann, ohne dafür jeweils ein neue Datei zu erstellen.

 

[MarcDK]

Flash ist tot. SVG ist die Lösung deines Problems. Man kann komplexe, zoombare Grafiken erstellen. Beispiel:

http://marctv.de/blog/bioshock-infinite/2/ Das ist eine SVG Datei.

Die kann man auch wunderbar per JS interaktiv gestalten.

 

[palace4d]

Vektorgrafiken gehen super als .svg und werden wie alle Bilder über <img /> eingebunden

Alternativ direkt über das svg-Element. Optimal für einen Export aus Inkscape, Illustrator usw.

 

[xxMuahdibxx]

http://webkompetenz.wikidot.com/html-handbuch:svg-vektorgrafik

das ?

 

[Daaron]

Kurz gesagt - ich verstehe hier gar nichts. Meine Fantasie versagt wozu ich in meiner HTML-Seite eine Vektorgrafik statt einer normalen benötigte. Angeblich sähe das besser aus wenn man die Page zoomt (nur, warum tue ich selbiges, und so extrem?)

Falsch. Die Grafik sieht IMMER und ÜBERALL besser aus. Du kannst, gerade bei Icons, viel mehr Details in eine SVG als in eine Pixelgrafik packen. Außerdem sind SVGs oftmals viel kleiner.
Den größten Vorteil von SVGs hast du dann, wenn du die Grafiken aus IRGEND EINEM Grund skalieren musst (kleiner Tip: das S steht für "scalable"). Gerade im Responsive Design skaliert man laufend. Mobil-Displays haben oftmals eine Pixeldichte weit jenseits von dem, was man vom Desktop gewohnt ist. Auf einem iPad sieht ne PNG deutlich schlechter aus als auf nem 24"-TFT.

Mein Chef jedenfalls will, dass ich mich da mal bemühe.

Und da hast du nichts besseres zu tun, als dich hier darüber auszulassen? Er will es, tu es.

Oder ist (tatsächlich) gemeint eine (Vektor)Grafik als solche ohne Änderung des Page-Darstellungsmaßstabes zu zoomen; wie ich aufschnappte z.B. innerhalb eines Luftbilds zu navigieren - rein, raus, hin und her)?

Für Luftbilder sind Vektorgrafiken ungeeignet, genau wie für alles andere, dass ein Foto bzw. fotorealistisch ist.

Vektorgrafiken gehen super als .svg und werden wie alle Bilder über <img /> eingebunden. Du musst aber natürlich die Dimensionen immer festlegen.

Viel effizienter: Man verwendet als DOCTYPE einfach HTML5 und bindet den SVG-Code nahtlos in den HTML-Code ein.
Der große Vorteil gegenüber <img>: Die SVG wird Teil des DOM. All die schönen Dinge, die man mit dem DOM tun kann, kann man jetzt direkt auf die SVG anwenden. Das heißt: CSS + JS können kinderleicht auf die SVG angewendet werden, die Grafik kann "kinderleicht" in Echtzeit manipuliert werden, sie kann elementweise auf Klicks reagieren,...

 

[Tumbleweed]

Machst du gerade ein Praktikum oder woran werden wir hier zum zweiten Mal beteiligt? Ich sollte meinen Job auch endlich crowdsourcen. Ich bin so doof und arbeite noch selbst.

 

[cumulonimbus8]

@Tumbletweed
Was willst du uns nur damit sagen?

@Daaron
Wenn es an dir ist andere runterzuputzen, bitte. Ich habe das nicht nötig.
Und du selbst schreibst das weswegen ich ja eine solchermaßen unverfroren blöde Frage stelle: Fotorealistisches. Denn darum dürfte es meinem Chef mindestens auch gehen, und das heißt, meine qualifizierte Antwort ist: »Sieht nicht gut aus mit dem Plan!«

@xxMuahdibxx
Mit dem Code kann ich wenigstens mal vorführen was geht und was nicht.

@palace4d

Optimal für einen Export aus Inkscape, Illustrator usw.

Rate mal was ich nicht habe… Wenn es denn SVG sein muss stellt sich die sofortige Frage wie ich (Notfalls EPS konvertierend) an SVG gelange. Aber das wäre dann was für einen späteren Arbeitstag.


@alle anderen Teilnehmer
Ich werde mich also auf SVG einschießen müssen - und dann sehen ob das nur Logos sind oder ob da wieder die Ideen ins Kraut schießen.


CN8

 

[Daaron]

Und du selbst schreibst das weswegen ich ja eine solchermaßen unverfroren blöde Frage stelle: Fotorealistisches. Denn darum dürfte es meinem Chef mindestens auch gehen, und das heißt, meine qualifizierte Antwort ist: »Sieht nicht gut aus mit dem Plan!«

Es gibt einfach Dinge, die man nicht oder nur mit unverhältnismäßigem Aufwand als Vektorgrafik darstellen kann. Die Grenzen findest du ganz schnell, indem du mal ne Google Bildersuche nach "vector art" oder sowas laufen lässt.
http://inkscape.org/screenshots/gallery/inkscape-0.48-multipath.png <- sowas hier ist schon fast Ende der Fahnenstange, und hinsichtlich der nötigen Zeit, um so ein Kunstwerk zu erstellen, will ich gar keine Schätzung abgeben müssen.

Grundregel:
- Ist es ein Foto (oder was ähnliches, z.B. ne Renderszene)? Lass es als Pixelgrafik.
- Ist es ein Firmenlogo, ein Piktogramm, eine geometrische Figur, eine Blaupause,...? Nimm SVG.

Rate mal was ich nicht habe… Wenn es denn SVG sein muss stellt sich die sofortige Frage wie ich (Notfalls EPS konvertierend) an SVG gelange. Aber das wäre dann was für einen späteren Arbeitstag.

Das mit Abstand beste Werkzeug, um syntaktisch saubere SVGs zu erzeugen, ist Inkscape. Adobe Illustrator mag zwar der Platzhirsch bei Vektorgrafiken im Allgemeinen sein, aber der SVG-Export ist eher... unsauber. Adobe versteifen sich immer so extrem auf ihre nicht-standardisierten, proprietären Formate....

Da Inkscape durchaus auch EPS, PS oder PDF importieren kann, soll es daran nicht scheitern. ABER: eine EPS macht noch lange keine Vektorgrafik. In der EPS können durchaus pixelbasierte Daten drin sein. Aus denen wird nie wieder ein sauberer Vektor.

Ich werde mich also auf SVG einschießen müssen - und dann sehen ob das nur Logos sind oder ob da wieder die Ideen ins Kraut schießen.

Für fotorealistische Grafiken sollte man eher darüber nachdenken, ob man nicht über etwas JS - Magie, etwas serverseitiger Logik und unter Umständen sogar in reinem CSS3 verschiedene Auflösungen derselben Grafik ausliefert, je nachdem wie hoch die Pixeldichte oder Zoomstufe des Browsers/Displays ist.

Aber SVG-Grundlagen wirst du trotzdem lernen müssen. Das Zeug ist viel zu geil, um es nicht zu nutzen... vorausgesetzt, das Projekt lässt SVG überhaupt zu. Wir haben z.B. viele Business-to-Business - Projekte, wo Holzbrowser aka. IE<=8 an der Tagesordnung sind. Da geht SVG gar nicht.

 

[palace4d]

Wir haben z.B. viele Business-to-Business - Projekte, wo Holzbrowser aka. IE<=8 an der Tagesordnung sind. Da geht SVG gar nicht

Der IE kann dafür VML. In Verbindung mit Bonsai.js oder Raphael kann man damit die Vektorgrafiken auch in Holzbrowser darstellen.

Das mit Abstand beste Werkzeug, um syntaktisch saubere SVGs zu erzeugen, ist Inkscape. Adobe Illustrator ...

Stimmt, der von Inkscape erzeugte Code kann sich sehen lassen.

 

[Daaron]

Du meinst also, ich hab entweder die Wahl, statt SVGs einfach auf PNG/JPG zu setzen und ein paar Skalierungsartefakte in Kauf zu nehmen, oder aber monströse JavaScript-Adapter zu schreiben...
Genau die Kunden, die mit Holzbrowsern rumgurken, würden doch nicht einmal eine 5%ige Farbabweichung bemerken.

 

[cumulonimbus8]

@Daaron
Ich weiß absolut was man mit Vektorgrafiken (auf Grund deren Funktionsprinzip) machen sollte und was nicht. Problem war überhaupt diese zu erzeugen und anzuzeigen.

Und nun? „Was? Die wir gefunden haben kosten was? Dann such mal was anderes, notfalls normale.“
Juhu…

Dennoch will ich mir die Option mal offen halten - unser Firmenlogo leuchtet geradezu so aufbereitet zu sein.

CN8

 

[Daaron]

Für Kleinkram wie Icons lohnt es sich, immer wieder mal bei openclipart.org vorbei zu schauen. Da plünder ich regelmäßig für Kundenprojekte, PD-Lizenz machts möglich.

Bei eurem Firmenlogo kommt es darauf an, wie es aussieht. Manche Logos sind einfach nicht vektorisierbar. Wenn es zwar vektorisierbar wäre, aber nicht als Vektorgrafik vorliegt, dann binde die Pixelgrafik in Inkscape ein und bau das Logo auf darüber liegenden Ebenen in Pfaden nach.
Du kannst natürlich deinem Chef auch sanft verklickern, dass SVG für den von ihm geforderten Fall das falsche Werkzeug ist.

Insgesamt gibts einige Wege, SVGs zu erzeugen:
- von 0 an selbst gestalten. Inkscape oder Illustrator, idealerweise in Kombination mit nem Wacom Cintiq 24hd oder wenigstens nem Intuos. Mit Maus könnte man auch, aber da hat man bei komplexen Designs keine Freude.
- Trace-Programm auf Pixelgrafik anwenden. Das Ergebnis ist aber... mäh. Hab da bisher noch nie was wirklich gutes rausbekommen
- SVG in reinem Code schreiben. Sowas ist eher was, wenn man sehr spezielle Einsatzgebiete hat, z.B. eine Karte, auf der Gebiete farbig markiert werden sollen. Hier kann eine Datenbank mit den Koordinaten der Polygone gefüttert werden...