Pari pientä fiksausta piti vielä laittaa MiMaVe.Design.Photon webbiin. Grafiikasta, web designista ja svg:stä kiinnostuneille voin sanoa, että piti laittaa grafiikan viivojen filleille fallback Edgen takia, siis toinen arvo mihin voi tukeutua, jos oikea ei toimi. Tämä voi olla tulevaisuudessa ihan hyvä käytäntö, vaikka olin jo tuossa aikaisemmin aika innoissani kun myös Edge näytti pelittävän paremmin svg:n suhteen, mutta kuinka ollakkaan, taas kun testasin Edgeä pitkästä aikaa puuttuivat gradientin omaavat viivat WebDesignBoyn loaderanimaatiosta ja webdesign- sivun animaatiosta. Ne siis toimivat Edgessä kohtuudella tossa joku aika sitten, että tiedä häntä. Muissa testatuissa selaimissa näyttäisi toimivan niinkuin pitääkin…
Lue lisää yksityiskohdista artikkelista.
Fallback Edge (SVG:lle)
Se mitä svg:lle tehtiin oli pistää koodin puolella, siis SVG:hän on periaatteessa koodia, vaikka sitä voidaan käsitellä kuin grafiikkaa ohjelmistoilla, viivojen gradienttilinkitysten perään perusväriarvot. Siis suomeksi: kun grafiikka hakee viivalle linkityksellä gradientin eli täyttää viivan liukuvärillä, niin tämän gradienttilinkityksen perään tuli väriarvo. Eli jos jostain syystä gradientti ei toimi, niin käyttöön tulee korvaava väri. WebDesignBoyn pää on ympyräviiva, jonka päässä on nuoli ja tämä viiva grafiikassa täyttyy liukuvärillä mustasta osittain läpinäkyvään vaaleaan jne. Kun tämä ei toimi tulee sen sijalle yksi väri, vähän läpinäkyvä musta (rgba 0,0,0,0.8). Eron voi nähdä esim. srollailemalla webdesign -sivua eestaas Edgellä ja jollain toisella selaimella. Ympyrälle piti laittaa myös täytölle fallback, eli fill:none:n tilalle rgba(255,255,255,0) siis täysin läpinäkyvä valkoinen.
Tulen yhä enemmän vakuuttuneeksi SVG:n mahdollisuuksista ja mitä enemmän ominaisuuksia tulee tuetuksi selaimissa sen hienompaa ja enemmän on mahdollisuuksia tarjolla. Ajattele täysin interaktiiviset grafiikat nettisivuilla… Eli taiteilet Inkscapella tai Illustraattorilla grafiikan, pukkaat sen ulos koodina, liität tämän koodin sivuille ja kikkailet css-animaatiolla ja JavaScriptillä. Lisää opiskelua ja testailua vaan…
