Posts Tagged ‘SVG’

SVGWEB – javascript hack från google

december 21, 2012

A List apart skriver om hacket här:
Kortfattat så kollar man av om browser stödjer SVG eller inte. Om det inte gör det, så skickar man upp FLASH (!).
http://www.alistapart.com/articles/cross-platform-scalable-vector-graphics-with-svgweb/

Googles SVGWEB community:

http://code.google.com/p/svgweb/

Huvudanledningen till hacket är förstås att enbart version 9 av IE stödjer SVG..

Annonser

Responsive design och ikoner för dolda menyer

oktober 12, 2012

Smashing återigen – som skriver bra artikel om vilka ikoner som används idag för att visa att det finns dolda menyer.Ingen standard har satt sig ännu, men majoriteten av de största sajterna använder sig av en ikon med tre streck. Dock används den olika på olika sajter. Vid tryck på ikonen på Twitter bootstrap, så  fälls en meny ut. Dconstruct 2012 fäller ut en meny ovanför som skjuter ned toppen av sajten.
Och i iOs så används ikonen med streck i Findern för att ge fullbredd åt filer och mappar.

Andra bra alernativ  är skriva ut ordet Meny med plus efter. Safe att använda är också en pil nedåt brevid valet. Det indikerar en select meny.

Dåligt exempel är kugghjul, som indikerar att det handlar om inställningar.

Artikeln ger också hjälp med hur man lätt kollar av om browsern klarar SVG eller inte:

1 if (!Modernizr.svg) {
2     $("#svg-icon").css("background-image", "url(fallback.png)");
3 }

 

SVG – vilka browsers stödjer och fördelar

augusti 7, 2012

Bra artikel om SVG och dess fördelar:

http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/

Online editors för att skapa SVG, som dock inte fungerar i Safari.. :
http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html
Har testat den och vid först tyckte jag att den var ruggigt bra på att göra om min png bild till en svg. Dock så fungerade svg filen inte i Safari, utan bara i Firefox. Sparade min ursprungliga vector till svg via Illustrator istället och då kom det ut heeelt annan kod som fungerade i Safari..

Bra artikel om varför SVG är att föredra som bildformat

januari 24, 2012

Smashing magazine skriver en bra artikel, där man pedagogiskt förklarar varför man bör använda SVG (skalbara vector bilder) bilder istället för rastrerade bilder.

http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/

Att zooma in en rastrerad bild gör ju att den tappar i skärpa och de blir otydliga. Och vem zoomar in i bilder – ju de som ser dåligt. Det tror jag i och för sig inte att jag läste i deras artikel, men så är det.
En annan anledning som är mycket mer vanlig är att vi numera använder oss flitigt av responsive design, dvs att vi anpassar webbsidans layout beroende på vilken sorts device som surfar in på den. En mobiltelefon har mycket tätare med pixlar än en vanlig skärm. Därför så har man skalat upp pixel storlekar p på mobiltelefoner till gånger två. Om du satt en font storlek till 12 pixlar, så blir det gånger 2 på mobilen. Annars skulle vi inte kunna läsa. Samma sak händer med bilder och om du rastrerat en bild så blir de inte lika snygga på mobilskärmen. Därför är det bättre med svg…

SVG funkar numera på Explorer 9+, Firefox Chrome Safari 4+ och Opera 9,5+. Här är en lista på vilka browsers på mobiler som hanterar SVG och det är de flesta: http://mobilehtml5.org/