Retina & SVG
Verfasst: 12.07.2012 11:10
Hallo,
ich versuche zurzeit mein Forum für eine Zukunft mit hochauflösenden Monitoren (z.B. Retina) aufzurüsten und investiere jede Menge Zeit alle Images durch SVG Grafiken zu ersetzen. Ich komme zwar zu guten Ergebnissen auf allen modernen Browsern, dennoch muss ich noch eine befriedigende Lösung für die vielen XP Nutzer (mit IE8) und den vielen alten Macs (PowerPC) finden, was mir aber kurzfristig gelingen sollte.
Da ich über keinen hochauflösenden Monitor verfüge skaliere ich die Websites mit „strg +/-„ und stoße dabei auf unbefriedigende Ergebnisse. Nur Google-Chrome vergrößert dabei die Grafik mit jedem Schritt messerscharf, bei allen andern werden Ränder abgeschnitten oder mit einer grotesken Unschärfe dargestellt.
Diese Skalierung sagt natürlich nichts darüber aus, wie die Grafiken letztendlich auf einem hochauflösenden Bildschirm dargestellt werden. Da sich hier sicher der eine oder andere mit einem Retina Display aufhält wäre es prima, wenn jemand mal die folgende kleine Grafik einbinden und einen Screenshot machen könnte.
ich versuche zurzeit mein Forum für eine Zukunft mit hochauflösenden Monitoren (z.B. Retina) aufzurüsten und investiere jede Menge Zeit alle Images durch SVG Grafiken zu ersetzen. Ich komme zwar zu guten Ergebnissen auf allen modernen Browsern, dennoch muss ich noch eine befriedigende Lösung für die vielen XP Nutzer (mit IE8) und den vielen alten Macs (PowerPC) finden, was mir aber kurzfristig gelingen sollte.
Da ich über keinen hochauflösenden Monitor verfüge skaliere ich die Websites mit „strg +/-„ und stoße dabei auf unbefriedigende Ergebnisse. Nur Google-Chrome vergrößert dabei die Grafik mit jedem Schritt messerscharf, bei allen andern werden Ränder abgeschnitten oder mit einer grotesken Unschärfe dargestellt.
Diese Skalierung sagt natürlich nichts darüber aus, wie die Grafiken letztendlich auf einem hochauflösenden Bildschirm dargestellt werden. Da sich hier sicher der eine oder andere mit einem Retina Display aufhält wäre es prima, wenn jemand mal die folgende kleine Grafik einbinden und einen Screenshot machen könnte.
Code: Alles auswählen
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
version="1.1" baseProfile="full"
width="27px" height="27px" viewport="0 0 27 27">
<defs>
<linearGradient id="inner" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="5%" stop-color="#E0E2E6" />
<stop offset="95%" stop-color="#FFFFFF" />
</linearGradient>
</defs>
<circle cx="50%" cy="50%" r="50%" fill="#2A77B9" />
<circle cx="50%" cy="50%" r="45%" fill="#FFFFFF" />
<circle cx="50%" cy="50%" r="41%" fill="url(#inner)" />
</svg>