• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Vektorgrafiken?

Status
Für weitere Antworten geschlossen.
Loon3y

Loon3y

Neues Mitglied
Hallo,

für ein flexibles Design werden auch Vektorgrafiken (Soweit ich das verstanden habe) benötigt.

Jetzt stellt sich mir die Frage, wie bekomme ich aus einer .png / .jpg-datei eine vektorgrafik? Ist das möglich? Oder muss man das komplett neu erstellen?

Was für Vor- und Nachteile bringen Vektorgrafiken? Wie groß sind diese Formate im Vergleich zu .png oder .jpg?

Grüße und schonmal vielen Dank für die Antworten.

Loon3y
 
Werbung:
Hi ho,

der größte Vorteil von Vektorgrafiken ist, dass sie nicht mit Pixeln arbeiten und so beliebig vergrößert werden können. Wikipedia liefert hierzu eine schöne Grafik:

Bild:Zeichen 224 20px.png – Wikipedia

Links ist eine Vektorgrafik abgebildet und rechts eine normale Rastergrafik. Das Bildformat von Vektorgrafiken ist soviel ich weiß meist .Svg. Ich hoffe ich konnte dir wenigstens ein wenig helfen :mrgreen:

lg
 
Danke ersteinmal für die Antwort.

Dennoch habe ich viele Fragen darüber wie z.B.:

- Wie binde ich Vektorgrafiken in die homepage ein? ganz normal mit <img src= ....> ?

- Verändert sich die Größe automatisch mit oder muss ich Werte angeben?

- Wie ist die Dateigröße im Vergleich zu .png / .jpg?

- Sollte man alle Grafikbuttons / Banner / Backgrounds in .svg machen?

- Kann man aus .png-bildern .svg's machen? Wenn ja wie?

Grüßle..
 
Werbung:
zuerst einmal, man benötigt für ein flexibles web-design keine vektor grafiken, ich bin bisher immer ohne ausgekommen und mache das nun doch schon eine ganze weile.

Loon3y schrieb:
Danke ersteinmal für die Antwort.

Dennoch habe ich viele Fragen darüber wie z.B.:

- Wie binde ich Vektorgrafiken in die homepage ein? ganz normal mit <img src= ....> ?
Zum Vergrößern anklicken....
versuch es doch einfach mal. ob dein browser die grafiken unterstützt, ob plugins geladen werden müssen, sieht man dann ja. standard formate für webseiten sind das sicher nicht.

Loon3y schrieb:
- Verändert sich die Größe automatisch mit oder muss ich Werte angeben?
Zum Vergrößern anklicken....
im browser muss man immer sagen, wie die grösse einer grafik sein soll, sonst wird sie in original-grösse angezeigt.

Loon3y schrieb:
- Wie ist die Dateigröße im Vergleich zu .png / .jpg?
Zum Vergrößern anklicken....
im verhälltnis zu einer png datei sicher wesentlich grösser. png lebt vom hohen kompressionsgrad bei guter qualität

Loon3y schrieb:
- Sollte man alle Grafikbuttons / Banner / Backgrounds in .svg machen?
Zum Vergrößern anklicken....
nein, sicher nicht. vektorgrafiken braucht man nur, wenn man beliebig skalieren möchte, sprich die grösse variabel ist und die qualität gleich bleiben MUSS. gerige verluste bei einer webseite sind leicht zu verkraften, im grafik bereich (z.b. zeitungslayout, plakate etc) aber nicht.

Loon3y schrieb:
- Kann man aus .png-bildern .svg's machen? Wenn ja wie?
Zum Vergrößern anklicken....
es gibt sicher möglichkeiten bilder zu konvertieren. google wird dir da sicher mehr sagen können als wir.
 
sysop schrieb:
zuerst einmal, man benötigt für ein flexibles web-design keine vektor grafiken, ich bin bisher immer ohne ausgekommen und mache das nun doch schon eine ganze weile.
Zum Vergrößern anklicken....

das wird wohl wahr sein. nur wie stellt man es an, wenn man ein flexibles design hat (angaben von höhen und breiten in em statt pixel?), das die grafiken sich mit vergrößern? das will ich ja erzielen..wenn ich nun ein hintergrundbild habe in meinen body und sich die divs innerhalb des bodys mit der schrift automatisch vergrößern, dann wachsen sie ja auch in die breite und höhe. d.h. der body muss auch breiter werden, d.h. das bodybild muss auch breiter / höher werden. Oder wenn ich eine Navi-Leiste mit mousovereffekt habe, dann sind da ja auch bilder, bei flexiblen design ändert sich alles in der größe, die navi bleibt aber brav an ihren platz und in der größe...


im browser muss man immer sagen, wie die grösse einer grafik sein soll, sonst wird sie in original-grösse angezeigt.
Zum Vergrößern anklicken....
wenn ich jetzt ein 950x150 großes bild habe, muss ich doch nicht noch in den <img src="xyz.png" width="950" height="150" alt="xyz" /> mit angeben oder? was ändert das dann beim vergrößern? würde ich jetzt bein 950x150 größes bild via html im code auf 850 x 100 verkleinern wäre das doch eigentl so gesehen vergewaltigung...man kann nicht bei einem bild da und dort ein paar pixel wegnehmen und es wo reinquetschen..


Kenne mich leider auf dieser ebene sehr wenig aus, deswegen wäre es toll wenn ich noch auf ein bisschen hifle / unterstützung stoßen würde.

Denke das das thema passender im css oder html-forum aufgeoben ist. könnte ein mod es bitte verschieben? danke

Grüße
Loon3y
 
im body-bereich gibst du deine hintergrund-grafik per css z.b. so an:
Code: 
    background-color:white;
    background-image: url(white.jpg);
    background-attachment:fixed;
    background-repeat: no-repeat;

hier brauchst du keine grössen angabe, pass deine grafik einfach so an, dass sie genau passt. mit background-repeat: no-repeat; stellst du ein, dass deine grafik NICHT gekachelt wird, sonst wird die grafik sooft wiederholt, bis dein hintergrund befüllt wurde. für gewöhnlich gibt man auch dann eine farbe an, wenn ein bild darüber gelegt wurde.

die skalierbarkeit
bezieht sich normalerweise nicht unbedingt auf die hintergrund-grafik sondern auf die html-elemente wie z.b. deine schriftgrösse.
 
Werbung:
Ja das ist mir voll klar wie ich via css eine hintergrundgrafik einbinde.

aber ich habe body und übern body ein div-layer names over. dieses divlayer over ist 950px width und 100% height. dann hab ich eine hintergrundgrafik die 950px breit ist (links und rechts jeweils etwas grafisches) und die nach unten sich unendlich wiederholt (so lang wie die seite eben ist).

Wenn ich nun alles flexibel mache reichen mir ja die 950px (79.17em) width nichtmehr aus sondern ich habe vllt 1000px (83.33em) width oder nur 500px (41.67em) width, d.h. die grafik muss sich mit vergrößern oder verkleinern (in der breite). wie stelle ich das an?

Welcome to my Page

grafik: http://www.skc-07-neustadt.de/self/graphics/body-over.png

css-befehl:

Code: 
    /* SITE CONTAINER */

        #over     {
            height: 100%;
            width: 950px;
            margin: 10px auto;
            background: url("graphics/body-over.png") repeat;
            }
 
Dann musst du die Grafik in eine linke und rechte Hälfte zerschneiden.
Die eine weist du z.B. #over und die andere #over_innen zu.
Die eine positionierst du links:
Code: 
background-image : url(links.gif);
background-position : left top;
background-repeat : repeat-y;
und die andere rechts.
 
Zuletzt bearbeitet:
und wo füge ich dieses 2te div dann ein? also an welcher position? und wieso .gif als bildendung?! ^^
 
Werbung:
Loon3y schrieb:
und wo füge ich dieses 2te div dann ein? also an welcher position? und wieso .gif ..
Zum Vergrößern anklicken....
.gif habe ich einfach nur als Beispiel gemeint.
Das css:
Code: 
#over_outer {
height: 100%;
width: 950px;
margin: 10px auto;
background-color: #ffffff;
background-image: url("http://www.html.de/images/body-over-left.png");
background-position: left top;
background-repeat: repeat-y;
}
#over {
height: 100%;
background-image: url("http://www.html.de/images/body-over-right.png");
background-position: right top;
background-repeat: repeat-y;
}
<div id="over_outer"> spannst du um <div id="over">
Code: 
<div id="over_outer">
<div id="over">
.....
.....
<div>
<div><!--Ende #over_outer-->
Bei einer festen Breite in px macht das natürlich noch keinen Sinn.
 
Ok das werde ich heute mal versuchen.

Naja wenn dann würde sich ja die widht statt px in em ändern dann wäre es ja schon flexibel, oder?

wäre es auch ne mgölichkeit einfach:

Code: 
 <div id="over"> 
<img src="links.png" class="left" alt ="links" /> 
<img src="rechts.png" class= "right" alt="rechts" />
</div>

und dann eben noch 2 klassen vergeben wo ich die bilderpositionen definiere?
 
Loon3y schrieb:
wenn ich jetzt ein 950x150 großes bild habe, muss ich doch nicht noch in den <img src="xyz.png" width="950" height="150" alt="xyz" /> mit angeben oder?
Zum Vergrößern anklicken....
Musst Du nicht. Das macht man aber, damit sofort beim Aufbau der Seite der richtige Platz für das Image reserviert wird, noch bevor das Image geladen wird. Sicher hast Du den Effekt schonmal beobachten können, wenn man das nicht angibt, besonders auf Websites, die viele Grafiken laden, fällt das auf: Das ganze Layout "springt" vor und zurück, hoch und runter, weil der Platz für das Image erst reserviert werden kann, wenn die Größe des Images am Server abgefragt wurde (also das Laden des Bildes beginnt). Das ist - eben besonders bei Seiten mit vielen Bildern - ein ziemlich unangenehmer Effekt, vor allem, wenn dazwischen Text steht, den der Nutzer schonmal versucht zu lesen.

Gruß,
-Efchen
 
Werbung:
wenn ich nur mit width="950px" height="150px" arbeite bringt er mir einen fehler, wieso? wieso ist es nötig das man style="...." macht?
 
height="" und width="" sind HTML-Attribute, dort benutzt man kein px.
height: und width: sind CSS Eigenschaften, dort benutzt man immer eine Einheit (px, em...).
 
Werbung:
Loon3y schrieb:
....
wäre es auch ne mgölichkeit einfach:
Code: 
 <div id="over"> 
<img src="links.png" class="left" alt ="links" /> 
<img src="rechts.png" class= "right" alt="rechts" />
</div>
und dann eben noch 2 klassen vergeben wo ich die bilderpositionen definiere?
Zum Vergrößern anklicken....
Das ginge im Prinzip schon so ähnlich. Aber dazu bräuchtest du weitere Elemente mit umständlichen css. Ohne css würde die Seite unter Umständen unbenutzbar werden weil die Grafiken sehr hoch ausfallen würden.

Warum willst du die Lösung mit background-image nicht annehmen?
Es währe nur ein weiters Element nötig. Mit <img> währen es mindestens vier weitere, sinnfreie Elemente.

Am flexibelsten wird die Seite wenn du auf width für #over ganz verzichtest.
Ob das sinnvoll ist hängt von der restlichen Gestaltung ab.
Sowas übt sich aber einfacher in kleinen Beispielen als mit einer halbfertigen html-Datei.
 
Zuletzt bearbeitet:
Loon3y

ich nehme selbstverständlich die lösung mit dem zweiten div-layer an, aber ich wollte auch noch nachfragen ob es mit <img src= ..> gehen würde. ;)

nunja...jetzt steh ich leider erstmal vor einem anderen problem..... ._. siehe html valide-thread..
 
sysop schrieb:
im verhälltnis zu einer png datei sicher wesentlich grösser. png lebt vom hohen kompressionsgrad bei guter qualität
Zum Vergrößern anklicken....
das stimmt nicht so ganz ^^
du musst dir das so vorstellen:
wenn du einfach einen strich zeichnest (z.B. in paint) dann wird jedes einzelne pixel (am ganzen bild) abgespeichert also es fängt an: pixel 1*1 (position) farbe: schwarz pixel 1*2 farbe weiß...
bei vektografiken ist das einfacher, denn da steht dann mehr oder weniger einfach:
strich von 1*1 nach 259*235*
verstanden?
hab das heute mal ausprobiert: vektografi-datei 14kb, png datei 1,7 mb
man muss hier allerdings auch zugeben dass das bild doch relativ groß ist
aber grundsätzlich sind vektografiken erheblich kleiner als normale pixel-formate
noch ein vorteil: wenn du das Bild (z.B. png format) vergößerst werden noch mehr pixel abgespeichert, die datei braucht auf einmal unmengen von speicherplatz, wenn du hingegen eine vektografik vergrößerst, bleibt die Datei gleich groß (evtl. verändert sich die größe bei sehr starker vergrößerung um ein par kb, kA hab mich ja auch ned durch wikipedia gefressen ^^)
hoffe das is relativ verständlich so
zum vektografiken erstellen is inkscape ganz gut (einfach mal googln)
übrigens kannst in vektografiken auch reinzoomen ohne das diese pixelig werden...
alfray off
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben