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

Skallierbare svg-grafik mit Link

SirROG

SirROG

Mitglied
Guten Tag html.de-Freunde
Wie der Titel schon sagt würde ich gerne ne (fertige, also schon erstellte) Vektorgrafik im .svg Format mit nem Link in meine Webseite einfügen. Die Breite soll dabei 25% des Bildschirms betragen und z.B. ne maximale Breite von 800px haben. Mit einem normalen jpg oder png Bild ist es ja kein Problem da hab ich das so gelösst:
HTML: 
<a href="http://xxxxx.html"><img alt="Bild" src="http://seite.beispielbild.png" style="border: 0px solid ; width: 100%; max-width: 800px;"></a>

Hab mit Googeln nur was mit ner ViewBox rausgefunden, aber kann mir da leider nichts zusammenreimen, da ich zum ersten Mal mit svg in verbindung mit HTML arbeite.


Vielen Dank für Eure Hilfe :)

Euer SirROG
 
Werbung:
Eine svg ist auch nur eine Bildgrafik die Du identisch wie PNGs einbinden und per CSS stylen kannst.
 
Ahh cool klappt wircklich prima :)
Vielen Dank fürs Helfen.

War mir eben nicht ganz sicher ob das der korrekte Weg is um nen svg einzubinden, oder ob man da dies iwi speziell einbinden muss.
 
Werbung:
Hmm mir is grad aufgefallen im Internet Explorer 10 wird die svg Grafik nicht skalliert, nur in Mozilla Firefox und Safari.
Hat da wer ne Lösung oder is da der Internet Explorer wieder mal zu doof für sowas?
 
Hmm vlt. xD. Also entweder mach ich da immernoch was falsch oder es braucht noch was mehr.
Hier mein bisheriger Code:
HTML: 
<a title="Google" href="https://www.google.ch/"

                style="display:block;"><img title="Home" alt="Home" preserveaspectratio="xMidYMid slice"

                  src="http://m.rogfrog.com/images/home.svg" style="border: 0px solid ; width: 100%; max-width: 150px; padding-top:5%;
padding-bottom:5%;padding-right:10%;padding-left:10%;"> </a>
Skalliert so leider immernoch ned im Internet Explorer 9 /10.
 
Werbung:
In dem von threadi verlinkten Thead steht aber auch etwas davon, dass die IE-Probleme mit Größenangaben in % zusammenhängen.
 
Tronjer schrieb:
In dem von threadi verlinkten Thead steht aber auch etwas davon, dass die IE-Probleme mit Größenangaben in % zusammenhängen.
Zum Vergrößern anklicken....
Ja, dass hab ich auch gelesen. Aber das ist ja auch einer der Gründe weshalb ich diesen Thread erstellt habe. Ich suche nach einer Lösung wie man svg- oder Vektorgrafiken im Internet Explorer mit %-Angaben skallieren kann :)
 
Normaler Weise lassen sich 90% aller derartigen Probleme mit Hilfe von stackoverflow lösen. Wenn dort nicht Brauchbares steht, funktioniert es mit dem IE vielleicht ja wirklich noch nicht.

Bau dir doch einfach einen Fallback mit JavaScript und weise dem SVG x% der innerWidth zu.
 
Werbung:
Dafür müssten aber ja dann alle Besucher JavaScript aktiviert haben, denke deshalb ist das ja auch keine ideale Lösung - aber vielen Dank für den Vorschlag (:
 
Dann schreibe eben noch ein no-script Tag und hau dort ein .png ein. Aber die paar User ohne JS sind eigentlich eine vernachlässigenswerte Größe.
 
Werbung:
Tronjer schrieb:
Dann schreibe eben noch ein no-script Tag und hau dort ein .png ein. Aber die paar User ohne JS sind eigentlich eine vernachlässigenswerte Größe.
Zum Vergrößern anklicken....
So hab nun drüber nachgedacht und denke dann das ich wohl halt auf diese User verzichte welche Internetexplorer benutzen und kein JavaScript aktiviert haben.
Und werde wie es Tronjer vorgeschlagen hat, diese mit einem no-script darauf Hinweisen.

Nun hätte ich aber noch ne Frage zum Fallback, also ich will ja nun, dass falls der Benutzer kein Internet Explorer benutzt, das svg angezeigt wird und falls er den Internetexploer verwendet soll das png-Bild angezeigt werden.
Hab mir ne Varriante überlegt, leider zeigt es mir mit dieser kein Bild an und ich weiss auch noch ned, wie ich dann die svg-Grafik ausblende oder nicht anzeige. Klar könnte ich nun für alle anderen Browser auch nen Fallback schreiben, wo dann die svg-Grafik geladen wird, aber irgendwie kommt mir das bischen zu kompliziert vor. denke gibt sicher ne einfachere Lösung (:

Hier Mein Denkansatz:
Code: 
<!--[if lt IE 1]>
<img   title="Bild" alt="Image" src="http://www.html.de/images/htmlde.png">  <![endif]-->

Und ja sorry falls der Code und der Denkansatz überhaupt keinen Sinnergibt, aber hatte zuvor noch nie Berrührungen mit JavaScript.

Vielen Dank für Eure Hilfe (:
 
Wie wäre es denn mit PHP?

Im HTML übergibst du das scr-Attribut des Images als Variable. Anschließend schreibst du eine Funktion, die mit $_SERVER den Useragent des Browser ausliest. Auf das Ergebnis führst du ein preg_match() auf den IE-String aus. Je nach Ergebnis kannst du per if-else die Variable mit dem einen oder anderen Bild belegen.

Mit JavaScript lässt sich das fast genauso bewerkstelligen. Allerdings mit dem Unterschied, dass das Bild erst nach dem Laden des DOM eingefügt würde, während PHP die richtige Version serverseitig ausliefert.
 
Vielen Dank, denke werde es mit JavaScript lösen, da ich bei meinem derzeitigen Hosting-Produkt kein php inkl. habe. Denke bevor ich mir das zusätzliche Packet kaufe, sollte ich mich erst bisschen mit php auseinander setzen, ansonsten lohnt sich das dann ja ned ;)
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben