Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Software>Safari 6 kann nicht SVG-Grafiken nicht skalieren

Safari 6 kann nicht SVG-Grafiken nicht skalieren

3d-swiss28.01.1317:42
Im Zeitalter von Retina-Displays bekommen SVG-Grafiken, da Vektordateien, eine völlig neue Bedeutung. Sie sind klein, auflösungsunabhängig und werden von Apple Safari seit Version 1 nicht korrekt unterstützt, da man die Grafiken nicht skalieren kann, sondern nur feste Höhen und Breiten angeben kann. Danke Apple.
Oder hat jmd einen Tipp, wie man das in HTML mit Prozentzahlen lösen kann?
0

Kommentare

bmc desgin28.01.1317:52
Macht man genau so wie mit anderen Grafiken auch, nur das Vector-Grafiken hält nicht verpixeln...


Cheers😊
„Ask your questions...“
0
3d-swiss29.01.1309:19
Hallo bmc design.

Abhängig von der Fenstergrösse soll die SVG-Grafik im Safari auch kleiner werden. Dies soll über CSS gesteuert werden.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG-Grafik :: HTML5</title>
<style type="text/css">
.logo1box { background-color: #DDD; }
.logo2box { height: 100%; background-color: #CCC; }
.logo2 { width: 20%; height: 20%; }
.abstand{ height: 20px; }
</style>
</head>

<body>
<div class="logo1box">svg 1:
<object data="elemente/test_mit_link.svg" type="image/svg+xml" class="logo2" >
<img src="elemente/test.png" alt="Logo" class="logo2" >
</object>
</div>
<div class="abstand"></div>
<div class="logo2box">svg 2:
<object data="elemente/test_mit_link.svg" type="image/svg+xml" class="logo2" >
<img src="elemente/test.png" alt="Logo" class="logo2" >
</object>
</div>
<div class="abstand"></div>
<div class="logo2box">png:
<img src="elemente/test.png" alt="Logo" class="logo2" >
</div>
</body>
</html>

Der Trick ist wohl .logo2box { height: 100%; ... }, denn ohne dies berechnet der Safari die SVG-Grafik falsch, siehe Bildschirmfoto.

Oder hast Du eine andere Lösung parat?
0
bmc desgin29.01.1310:22
Warum bindest Du die SVGs nicht via CSS ein und scalierst sie zum Container, der sie anzeigen soll???
Geht wesentlich einfacher als deine verschachtelten Sachen????!!!!

Cheers
😄
„Ask your questions...“
0
3d-swiss29.01.1310:32
Bilder oder Logos via CSS als Hintergrundbild in eine Box einsetzen hat seine Nachteile:
1. kein direkten Anklicken möglich
2. kein Wiedergabe im Ausdruck, wenn Benutzer es abschaltet
Ich habe hier nur den vereinfachten Quellcode wiedergegeben.
Die gleiche Datei wird im Firefox völlig richtig dargestellt. Alle Browser auf Webkit-Basis habe dieses SVG-Problem.
0
bmc desgin29.01.1319:00
Versteh Deine Argumentation bezüglich des Abschalten nicht.
Wenn ich sämtliche Bilder deaktiviere, werden die ja auch nicht angezeigt???

Bzgl des Anklicken muss man eben n bisschen scripten, oder n Type-Out setzen...
Oder Du setzt als Container kein DIV sondern ein IMG - also als Hintergrund des IMG das SVG. Oder du machst ein Anker mit href und setzt dazwischen ein SPAN mit SVG als Hintergrund...
Bitte kein DIV zwischen den Anker, da nicht html valide...


Wie Du siehst gibt es mehrere Möglichkeiten...


Und nur weil FF Dir das anzeigt, heißt es nicht, das es korrekt ist. Vielleicht interpretiert FF das ja auch falsch 😚


Cheers
„Ask your questions...“
0
3d-swiss30.01.1310:20
Hallo bmc design,

danke für Deine Antworten. Du hast mich auf den richtigen Weg gebracht.

Sonnige Grüsse aus der Schweiz,
Jens.
0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.