Ultimate Guide to SVG

Kuvittele, että voit upottaa kuvan web-sivulle, skaalata kyseisen sivun mihin tahansa kokoon, eikä koskaan kadota kuvan laatua. No, voit. Se on täysin mahdollista, emme vain ole tehneet niin paljon kuin meidän pitäisi.

Kiinteät koot, kuten JPG-tiedostot, GIF-tiedostot ja PNG-tiedostot, ovat sijainnit verkossa, mutta niiden luonnostaan ​​staattinen luonne ristiriidassa Webin kanssa. Kun siirrymme reagoiviin, virtaaviin malleihin, sitä ärsyttävämpää se joutuu käsittelemään sellaisia ​​kuvia, jotka eivät pohjimmiltaan ole herkkiä. On turhauttavaa uskoa, kun ymmärrän, että on tulossa paras käytäntö luoda ja palvella useita eri versioita kunkin kuvan sivustossasi.

Ymmärrän, että on olemassa hyviä teknisiä syitä. Se kestää kauan ennen kuin kukaan luo äärettömän skaalatun valokuvan. Kuvat eivät kuitenkaan ole all-all ja kaikki loput kuvista. Vektorigrafiikka on tullut hyvin pitkälle. He ovat menossa vielä pitkälle.

Ne voivat olla hankalia hankkia, koska kaikki web-suunnittelija ei ole kuvittaja. Valokuvat ovat runsaat ja hyvä varastokuvio on helppo löytää. Vektorigrafiikka taas on usein huonolaatuista, tai ehkä et löydä juuri oikeaa. Kuvittajien vuokraaminen on kallista.

Mutta koska vektorigrafiikan tuki kasvaa verkossa, niin myös niiden käyttö. On aika, että jokainen oppii käyttämään niitä verkkosivustoillaan ja käyttämään niitä luovasti. Kuvat niin herkästi kuin verkkosivustemme ovat tulevaisuutta.

Tapaa SVG-tiedosto ...

Mikä on SVG ja miksi sinun pitäisi käyttää sitä?

Okei, aloittelijoillemme, SVG tarkoittaa Scalable Vector Graphicsia. SVG-tiedostot ovat melko yksinkertaisia ​​asioita, teoriassa. Ne ovat vain tekstitiedostoja, joissa on joukko XML: ää. Jokainen SVG-tiedoston visuaalinen tieto määritellään ihmisen luettavassa koodissa, jonka selaimesi, grafiikkaohjelmien jne. Laskee ja tekee.

Tämä tarkoittaa sitä, että vaikka SVG-tiedostot eivät ole yhtä monimutkaisia ​​kuin esimerkiksi JPG-muodossa muotoiltu valokuva, ne ovat äärettömän joustavia. Niitä voidaan muuttaa manuaalisesti tekstieditorissa. Niitä voidaan muuttaa koodilla, kuten JavaScript ja CSS. Ne voidaan pakata melkein naurettavan pieniksi koiksi.

Toisin sanoen ne on suunniteltu käytettäväksi muiden verkkotekniikoiden ohella. Ne ovat täydellisiä meille.

1990-luvun lopulla Macromedia ja Microsoft (ja muut yritykset) otettiin käyttöön VML , ja sitten Adobe (ja muut yritykset) esiteltiin PGML mahdollisia ratkaisuja W3C: n verkkosivustoille tarkoitettujen vektorikuvien (ja mahdollisesti vaihtoehtona vanhaan PostScript-muotoon). W3C sanoi: "Ei, teemme omat asiamme; mutta kiitos ideoista! "Tuloksena oli SVG-työryhmä.

Syyskuussa 2001 SVG 1.0 tuli viralliseksi W3C-suositukseksi, ja loppuosa on historiaa. Järjestä. Internet Explorer jäi käyttämättä SVG-muotoa yllättäen kukaan. Siitä lähtien on tehty päivityksiä mobiililaitteisiin, ja enemmän selvennyksiä.

Nytkin SVG-työryhmä luo SVG 2: n, joka sisältää enemmän integraatiointegraatiota HTML5-, CSS- ja WOFF-fonttimuotoihin.

Se saa tukea

Internet Explorerin ainoa versio, johon sinun on syytä huolehtia juuri nyt, on IE8. Se siitä. Kaikilla muilla on enemmän tai vähemmän täysi SVG-tuki. Kyllä, voit joutua vikoihin joskus myös "hyvistä" selaimista, mutta se on silti kannattavaa. Paitsi että he työskentelevät ympärillään, ongelmat ratkaistaan ​​jyrkästi, mutta mitä enemmän käytämme tätä tekniikkaa, sitä enemmän selaimen kehittäjät tukevat sitä.

Tarkista caniuse.com syvällisempää analyysiä siitä, mitä toimii ja mitä ei, mihin selaimiin.

Kaikki on reagoiva ... tai sen pitäisi olla

Internet-teknologia on mennyt tietä pitemmälle kuin staattiset verkkosivustot, joista aiemmin tunsimme. On aika, että kuvat tulevat kiinni, tavallinen ja yksinkertainen. Kun sinun on tehtävä kuvake, käytä SVG: tä. Jos haluat käyttää kuvaa, siirry SVG: lle, jos voit. Jos haluat abstrakti, mutta silti yksinkertainen verkkosivujen tausta, käytä SVG: tä.

En ole fiksu verkkokalvonäytön tekniikasta, varsinkin koska minulla ei ole sellaista. Se ei ole kateellisuus. No, se ei ole vain kateellisuus. Yksinkertainen tosiasia on, että Retina-näytöt ovat menneet ja tekivät palvelevia kuvia, jotka ovat paljon monimutkaisempia. SVG, joka on äärettömän skaalautuva, voi auttaa minimoimaan ongelman.

saavutettavuus

Käyttäjät, joilla on näkövammaiset, yleensä selailevat verkossa, kun kaikki on hieman pienennetty. Kun säännölliset kuvat zoomataan, ne menettävät laadun. SVG ei tee niin, joten miksi et käytä sitä, jotta näkövammaisille olisi laadukas kokemus?

Se voi auttaa sinua tulevaisuudessa varmistamaan sivustosi

Tekniikka muuttuu aina. Nykyään täällä voi olla poissa, mutta SVG on todennäköisesti noin jonkin aikaa. Niin kauan kuin W3C asettaa maailmanlaajuiset teollisuusstandardit, näyttää siltä, ​​että SVG on edelleen sosion vektorigrafiikan de facto -standardi. Käytä sitä nyt, ja verkkosivustosi asetetaan hyvälle, pitkälle.

SVG Tutorials & How-tos

Joten olet vakuuttunut. SVG on viileä, se on tulevaisuus, on aika oppia sitä. Onneksi kaikille, tämä on Internet. Tiedät vain , että ihmiset ovat viettäneet arvokkaita tunteja tunnissa luomalla ilmaisia ​​koulutusmateriaaleja kenelle tahansa, joka haluaa sen. Ihmiset, jotka tekevät tällaista asiaa, ovat ihmisiä, jotka tekevät Internetistä mahtavaa.

Sitten tietenkin menimme ja käytimme tunteja katselemalla erilaisia ​​opetusohjelmia löytämään parhaat niistä. Voit kiittää meitä myöhemmin. Nyt on lukemista tehtävä!

Huomaa: Muista, että SVG-tiedostot ovat kaikki XML-koodia, joten monet näistä opetusohjelmista ovat kehittäjien keskittymiä tai niissä on vain paljon koodia. Olemme sisällyttäneet molempia opetusohjelmia, jotka keskittyvät perusasiat ja SVG: n erityisiin, luova käyttötarkoitukset, joten älä jätä tätä osaa.

• SVG: n käyttäminen: Chris Coyier on kirjoittanut helposti ymmärrettäviä CSS- ja HTML-tutoriaaleja vuosittain osoitteessa css-tricks.com. Hänen aluke SVG: llä ei ole erilainen. Olen mukana linkkejä runsaisiin peruskäsityksiin ja opetusohjelmiin, mutta tässä aloin aloittaa. Tämä opetusohjelma sisältää perusohjeita Adobe Illustrator-käyttäjille.
• Miten pääset alkuun SVG: n kanssa: olisin häpeä, ellei sisällytetty WDD: n oma panos SVG-koulutukseen. Aina fantastinen Sara Vieira kattaa grafiikkasi luomisen, viemän ne, puhdistaa koodin, siirtää esitystapojen CSS-tiedostoihin ja paljon muuta.
• Resoluutio itsenäisyys SVG: n kanssa: Jos se on verkkoihin liittyvä, niin Smashing Magazine on luultavasti artikkeli siitä. Ne kattavat SVG-muodon perusteet heidän tavanomaisen tyylinsä ja huomiota yksityiskohtiin.
• Skaalautuva vektorigrafiikka (sarja artikkeleista): Hongkiat.com on toinen resurssi laadukkaaseen web- ja grafiikkaan liittyvään oppimiseen. Sen sijaan, että annettaisiin vain yksi pitkä artikkeli, he ovat julkaisseet niiden koko joukko Thoriq Firdaus. Englanti on joskus hieman puutteellinen, mutta ohjeet ovat edelleen selkeitä ja helposti ymmärrettäviä.
• Sara Soueidan: Skaalautuvan vektorigrafiikan muotoilu ja animaatio CSS: llä: Tämä on esityksen video joka on annettu CSSconf EU 2014 -ohjelmassa. Siinä Sara Soueidan tarjoaa useita vinkkejä, temppuja ja jopa muutamia hakkereita tyylien ja animaation soveltamiseen SVG: hen verkossa. Se on puolen tunnin pituinen, joten saat mukava ja pidä jotain tekemään muistiinpanoja käsillä. Se on täysin ajan arvoista.
• SVG: n vieminen verkkoon Adobe Illustrator CC: n avulla: Adobe Illustratorin käyttäjien pitäisi Tsekkaa tämä. Yksi Adoben omista blogeista antaa yksityiskohtaisia, ja tarkoitan hyvin yksityiskohtaisia ​​ohjeita siitä, miten SVG-tiedostoja viedään Webiin. Opi optimoimaan ne pienimpään Web-tiedoston kokoon.
• SVGBasics: Tämä koko verkkosivusto on omistettu opettamaan ihmisille, kuinka SVG-grafiikkaa voidaan luoda tyhjästä XML: n avulla. Suosittelen tätä, kenen kanssa käsitellään minkä tahansa verkkosivuston todellista taustapuolta - tai jopa etupäätä. Tietäen, miten koodi toimii voi mennä pitkälle ratkaista ongelmia lennossa.
• Jakob Jenkov: SVG-opetusohjelma: Toinen kehittäjäkeskeinen joukko opetusohjelmia, tässä. Suuri ero? Kirjoittaja sisälsi kunkin osion videomuodot. Jos opit paremmin tekemällä sekä visuaaliset että äänitiedot oppitunneista, tämä on hyvä paikka aloittaa.
• Yksinkertainen intro SVG-animaatioon: otsikko sanoo kaiken. David Walsh selittää, miten perustaa oman SVG-elementit animaatioon, joka käyttää eri elementtejä, joita käyttävät kirjastot ja paljon muuta. Se ei ole täydellinen opas, mutta se vie sinut peruskäsitteisiin, joita tarvitaan animaation aloittamiseen.
• Johdatus SVG-animaatioon: Tämä opetusohjelma menee hieman enemmän yksityiskohtia siitä, miten tarkasti SVG-objektien animointi. Sen lisäksi se käsittelee joitain yleisiä ongelmia, joita voit joutua animaation aikana, joten kannattaa lukea.
• Miten: Vie useita kuvakkeita Adobe Illustratorin SVG-tiedostoihin: Luo joukko SVG-kuvakkeita Illustratorissa? Pitää ne kaikki yhdessä Illustrator-tiedostossa? Vie ne kaikki erillisiin tiedostoihin yhdellä napsautuksella.
• Tekstin animointi SVG-polkuilla: Aivan kuten otsikkona on. Hanki animaatiosi, ehkä käyttää sitä logolla. Se varmasti näyttää tarpeeksi viileältä ...
• Animoitavat SVG-kuvakkeet CSS3: n ja JavaScriptin avulla: Yksi SVG: n suurimmista käyttökohteista on kuvakkeet ja hyvä syy. Tee yksi tiedosto, käytä sitä missä tahansa sivustossasi tai sovelluksessasi mistä tahansa kokoisesta. Mitä muuta voisit pyytää? Tämä opetusohjelma näyttää, miten animoida nämä kuvakkeet hiirellä.
• Skaalautuvan SVG Infographicin luominen: Infographics on yksi Internetin suosituimmista tavoista käyttää tosiasioita näinä päivinä. Miksi ei tehdä ne äärettömän skaalautuviksi? Heitä jotain animaatiota, ja voit hyvin puhaltaa mieleesi.
• SVG HTML Burger Buttonin tekeminen: Sano mitä haluat hampurilaispainikkeesta, se ei todennäköisesti mene mihinkään. Voit myös käytä SVG: tä ja animaatiota jotta se olisi paras, viilein hampurilaispainike. Tämä kattaa kuinka animoida polkuja ja aivohaluja tehdäksesi yhdestä painikkeesta kirjaimellisesti toisen, joten anna sille näyttää.
• Snap.svg Esimerkkejä ja oppaita: Tämä on opas Snap.svg JavaScript -kirjaston käyttämistä (katso jäljempänä olevat Työkalut-osio). Se on suunniteltu auttamaan sinua luomaan SVG-elementtejä JS: ssä ja animoimaan niitä, tekemällä niistä vuorovaikutteisia ja niin edelleen.
• Johdatus Raphaël.js: Raphaël.js on yksi suurista SVG-aiheisiin JavaScript-kirjastoihin siellä, ja Tämä artikkeli opastaa sinua käyttämään sitä. (Katso myös alla oleva Työkalut-osio.)
• Animoitu SVG-kuvake: Ihmiset näyttävät pitävän paljon animoituja kuvakkeita, joten voit myös oppia jokaisen lähestymistavan tekemään niitä, mitä voit. Tässä näemme Snap.svg-kirjaston toiminnan uudelleen, kun kirjoittaja luo ja animoi sitten mediasoittimen "play" -painikkeen.
• Leikkaaminen CSS: ssä ja SVG: ssä - Leikkauspiste Ominaisuus ja elementti: Tässä on a mukava pitkä artikkeli miten SVG-leikkausta käytetään kuvaamaan sisäisiä muotoja ja kuvia valtavan tekstin sisällä. Sinun kannattaa harkita sitä käyttääksesi suuria hienoja otsikoita, jotka ovat SEO-ystävällisiä, koska hakukoneen robotit voivat lukea niitä.
• SVG : n reagointi CSS: n kanssa: Vaikka SVG-tiedostot ovat äärettömän skaalattavissa, menetelmät, joita käytetään niiden sijoittamiseen verkkosivuille, voivat joskus aiheuttaa ongelmia. Tämä opetusohjelma alkaen codrops selittää miten ratkaista erilaiset ongelmat.
• Muoto Hover Effect SVG: Luo sileä ja tyylikäs näköinen animoitu hover-vaikutus kuvan esikatseluun. ( Tarkista demo. )
• SVG-pohjainen W3C: n nykypäivän selaimille: Ei aivan viimeisenä, eikä varmasti vähiten, meillä on tarjottu resurssi ihmiset, jotka esittivät koko SVG-muodon ensiksi: W3C. Se ei ole perusopetusohjelma tai esittely. Esipuheen mukaan se on luotu ammattimaisille ohjelmoijille, graafisille suunnittelijoille, joilla on "vahva tekninen taipuisuus", ja muille, jotka eivät ole mielenkiintoisia päästäkseen alas niittyhiekkaan.
• SVG Tutorial MDN: Kuten SVGBasics, tämä on melko laaja opetusohjelma, jonka Mozilla Developer Network tarjoaa. Laaja, koska se onkin, opetusohjelmaa pidetään "kehitteillä". Esimerkiksi tämä näkyy tällä hetkellä "Suodattimet" -sivulla, joka on tyhjä. Sivun mukaan opetusohjelma on varhaisessa kehitysvaiheessa. Jos pystyt, auttakaa meitä hakemaan ja kirjoittamalla kappale tai kaksi. Lisäpisteitä koko sivun kirjoittamiseen.

SVG-työkalut

Yksi SVG: n avoimesta luonteesta on se, että kukaan voi tehdä ohjelmistoja sille. Ei ole lisensiointia koskevia rajoituksia tai maksuja, vaan vain avoin standardi ihmisille. Kuten ehkä odottaa, monet kehittäjät ovat tehneet täsmälleen tämän.

Työkalut SVG-muodon luomiseen ja käyttöön on runsaasti. Ne vaihtelevat suurista ohjelmistopaketeista, joihin kuuluu mahdollisuus viedä SVG jälkipaneelina vektorin piirustusohjelmiin, jotka käyttävät SVG: ää ensisijaisena muotoiluna ja paljon muuta.

Nopea Google-haku "SVG-työkaluille" palauttaa "Noin 37 000 000 tulosta", joten tiedät, että siellä on paljon.

Missä sitten sinun pitäisi aloittaa?

Premium-sovellukset

Suuret nimet grafiikan luomisessa tukevat SVG: tä. Adobe Illustrator,Corel Draw, jopa eri tuotteista Xara - Kyllä, Xara on edelleen asia - kaikki voivat tuoda, muokata ja tallentaa tiedostoja muodossa. (Illustrator on tiedossa laittaa joitain outoja asioita SVG-tiedostoihin, joten sinun on oltava varovainen viennin asetusten kanssa.)

Inkscape

Jos et käytä jo vektorigrafiikkapakettia, Inkscape on loistava paikka aloittaa. Vuonna 2003 luotu toisen avoimen lähdekoodin Sodipodin projekti (joka perustui vielä toiseen OSS-projektiin), Inkscape on tullut standardi vapaa, monialainen vektorigrafiikkaohjelmisto. Se ei ole aivan yhtä täynnä kuin Adobe Illustrator, mutta se on enemmän kuin tarpeeksi useimmille vektorihankkeille.

Serif DrawPlus Starter Edition

serif on yritys, joka tekee melko hyvää grafiikan luomista ja työpöydän julkaisua. Kaikkien niiden tärkeimpien ohjelmistomuotojen mukana on ilmainen "Starter Editions", ja niiden vektorikuvasovellus ei ole poikkeus.

Älä anna "Starter Editionin" vähän hämätä sinua. Se ei ehkä ole kaikkea pro-versiota, mutta se voi saada työn useimmissa tapauksissa. Ellet ole kauppiaiden kuvittaja, tämä sovellus voi ja täyttää tarpeesi ... edellyttäen, että olet Windowsissa. Valitettavasti se ei ole cross-platform. Myös lataaminen edellyttää rekisteröintiä.

Karbon

Osa Calligra-toimisto-ohjelmistosta, joka on ensisijaisesti Linuxille, Karbon on täysin varusteltu vektorigrafiikan editori. Siinä on kaikki perusvälineet ja muutamia asioita lisäksi. Asennus Macille ja Windowsille on tällä hetkellä vaikeaa, mutta ei mahdotonta.

PrintDesign

Nimi kuulostaa ohjelmistopaketista 90-luvulta, tiedän, mutta se on oikeastaan ​​aika uusi. Itse asiassa se on seuraaja vanhalle sK1-kuvasovellukselle, joka on lopetettu. PrintDesign on tällä hetkellä esikatseluvaiheessa ja sillä on sekä Linux- että Windows-versiot. Se ei ole vielä valmis tuotantoon, mutta se on katsomisen arvoinen projekti.

SVG-edit

Nimi on ehkä hieman nokkana, mutta ohjelmisto on enemmän kuin pystyy. SVG-edit Perustuu täysin web-tekniikoihin, erityisesti HTML5, JavaScript ja CSS. Tämä tarkoittaa, että palvelinpuolen toimintoja ei ole. Lisäksi avoimen lähdekoodin avulla voit ladata sen, laittaa sen omalle palvelimellesi tai jopa käyttää sitä työpöydällä.

Se on a ominaisuusluettelo tarpeeksi kauan, jotta monet työpöytäsovellukset ovat mustasukkaisia ​​ja kulkevat nopeammin kuin useimmat niistä, joten antaa sille pyörteitä.

Janvas

Janvas on ainoa tässä luettelossa oleva web-pohjainen sovellus, joka ei ole ehdottomasti ilmaista. Kolmenkymmenen päivän kokeilujaksoa, jonka jälkeen tilaus maksaa 26 euroa vuodessa. Jos mikään muusta WWW-pohjaisesta SVG-toimituksesta ei tee sinusta onnelliseksi, voit ehkä itse asiassa harkita sitä.

Piirtotyökalut ovat kehittyneitä ja tuttuja, jokainen muuttuja on muokattavissa sivupalkissa ja voit tallentaa asiakirjat Google Driveen. Voit luoda malleja, tehdä yhteistyötä piirustus- asiakirjojen kanssa ja jopa sisällyttää CSS- ja JS-tiedostoja vuorovaikutukseen grafiikan kanssa.

Kaiken kaikkiaan se on vankka tarjous.

Mondrian

Pieni. Tyylikäs. Yksinkertainen. Mondrian on vielä yksi avoin lähdekoodi tarjoaa, ja se on paljon pienempi kuin useimmat. Se ei edes ole tekstityökalu ... mutta se tekee yksinkertaisia ​​piirustuksia hyvin. Voit avata tiedostoja kiintolevyltä tai URL-osoitteesta, napata upotuskoodia verkkosivustollesi tai pelastaa pelkästään piirustuksesi SVG- tai PNG-muodossa. Se ei ehkä ole yhtä kehittynyt kuin muut sovellukset, mutta se tuntuu miellyttävältä käyttää, ja kynätyökalu tuntuu luonnolliselta.

Piirrä SVG

Piirrä SVG on toinen WWW-pohjainen SVG-editori, jossa on kaikki tarvitsemat ominaisuudet. Se on vahvin piste näyttää olevan pelkkä nopeus, jolla se lataa ja piirtää asioita. Valitettavasti käyttöliittymä on kuitenkin vakavasti virheellinen. Silti se on siellä ja se toimii, jos tarvitset sitä.

SVG-kirjastot

Kehittäjät iloitsevat! Meillä on myös joitain linkkejä sinulle. Loppujen lopuksi SVG ei ole vain toinen grafiikkaformaatti. Se on koodi. Se on koodi, joka voidaan liittää tai upottaa. Se voi olla vuorovaikutuksessa ja muuttunut lennossa. Matematiikan avulla!

Snap.svg

Napsahtaa on JS-kirjasto SVG: n luomiseen ja vuorovaikutukseen. Se on suunniteltu nykyaikaisille selaimille. Yup, se tarkoittaa tukee vain IE9 + ... mutta jos vanhemmat selaimet eivät ole sinun huolenaiheesi, mene siihen.

Raphaël

Raphaël, toisin kuin Snap, on yhteensopiva vanhempien selainten kanssa. Itse asiassa se voi työskennellä IE6 +, Safari 3+ ja Chrome 5+ kanssa. Jos kehität jotain sellaiselle yritysjärjestelmälle, jossa käyttäjät voivat olla vanhempia koneita, esimerkiksi Raphaël saattaa olla paras panostuksesi.

jQuery SVG

Kuten SVG ja jQuery? En ole kovin yllättynyt. jQuery on kenties menettänyt jonkin verran huomiota siihen, että se kerran oli, mutta se on silti monille meille avoin kirjasto.

jQuery SVG, sitten, on hyvin todennäköisesti plugin olet etsimässä. Siinä on toimintoja animaatioille, kaavioita ja jopa laajennuksia. Se on oikein, laajennukset plugin. Selaintuki on IE9 +, mutta vanhempia IE-versioita voidaan käyttää asianmukaisten selaimen lisäosien asennuksessa.

En kuitenkaan riippuisi käyttäjiä, joilla on kyseiset laajennukset.

SVGMagic

SVGMagic on drop-in, jQuery-pohjainen ratkaisu vanhemmille selaimille (IE 7 & 8). Sen sijaan, että luotaisit varmuuskopiot manuaalisesti kullekin käyttämäsi SVG-tiedostolle, tämä laajennus voi tuottaa ne lennossa. Se käsittelee taustakuvia aivan hienosti.

Kuinka se tekee jotain tästä? Se havaitsee, pystyykö käyttäjän selain käsittelemään SVG: ää. Jos näin on, se menee nukkumaan. Jos ei, se muodostaa yhteyden palvelinpuolen PHP-skriptiin ja kertoo, että se luo PNG-tiedoston kyseisiltä SVG-kuvilta vaadittavilla mitoilla.

Kun PHP-komentosarja lähettää nämä väliaikaiset varakuvakkeet takaisin jQuery-laajennukseen, oletus URL-osoitteet korvataan. Tämä on tietenkin aikaa, joten voit mahdollisesti määrittää paikanvaraajan kuvan, joka näytetään, kun muuntaminen tapahtuu.

Yksi huomautus: tällä hetkellä se ei voi käsitellä liikaa kuvia kerralla. Et halua käyttää tätä tekniikkaa sivuilla, joissa on enemmän kuin muutama SVG-tiedosto.

SVG.JS

Lopuksi, tässä on vaihtoehto tavu-laskurit. SVG.JS painaa vain 11,8kbs, kun gzipped. Pienestä koostaan ​​huolimatta se tukee vaikuttavia ominaisuuksia (kuten on lueteltu projektin sivulla):

• Animaatiot koosta, asemasta, muunnoksista, väreistä
• Tuskaton laajennus modulaarisen rakenteen ansiosta
• Käytettävissä on useita hyödyllisiä laajennuksia
• Yhdistetty api muototyyppien välillä, liikut, koko, keskipiste
• Sitovat tapahtumat elementteihin
• Täydellinen tuki opasiteille ja syväreitteille
• Tekstipolkuja, jopa animoituja
• Elementtiryhmät ja sarjat
• Dynaamiset kaltevuudet

Lue dokumentointi lisätietoja.

Stock SVG

Kaikki eivät ole kuvittaja. Ainakin minulla ei ole koskaan ollut hyvää. Siten varastokuvista tulee korvaamaton resurssi. On kuitenkin vaikeaa löytää hyviä juttuja. Mikään ei näytä Microsoftin clipartiltä, ​​on usein rajallinen tai kallis.

Älä menetä toivoa. Siellä on paljon tavaraa, joka on hyvälaatuista. Jos se ei täysin vastaa tarpeitasi, niin se on vektoritaidetta. On mahdollista, että sitä voidaan hienosäätää tarpeidesi mukaan, jos sinulla on perustiedot vektorigrafiikkatiedoista.

SVG voi tehdä enemmän kuin vain kuvitusta. Voit myös luoda kuvioita, suuria kuvitteellisia taustoja, jotka eivät syö kaistanleveyttä ja paljon muuta. Katsotaanpa, mitä ihmiset ovat tehneet muille meille:

SVG Clipart on openclipart.com

SVG: llä avoimena formaatina on paljon avoimen lähdekoodin harrastajia. Tämän seurauksena se on yksi ensisijaisista formaateista, joita käytetään siinä suurin vapaa taiteen kokoelma siellä.

Ja paljon se on clipart-ish. Ja paljon se on amatöörityötä. Jos näytät, on kuitenkin joitain laadukkaita grafiikkaa. Hei, se on ilmaista.

SVG -osakkeen

SVG -osakkeen on pieni sivusto, jossa on suhteellisen pieni mutta erinomainen kokoelma. Se on enimmäkseen kuvakkeita ja laitemalleja, mutta ne ovat kaikki korkealaatuisia. Jos tarvitset jotain näistä kahdesta asiasta, aloita täältä.

SVG resursseja deviantart.comissa

Ah DeviantArt, että jättiläinen yhteisö on edelleen voimakas. Hae royalty free-kuvituskuvia Valitse maksutapa Lataa kuvasi SVG Tallenna esikatselukuva Lisää aktiiviseen lightboxiin @ T Jälleen laatu vaihtelee, mutta siellä on hyviä tavaroita, jos sinulla on aikaa katsoa.

SVG kuvioiden galleria

Pieni galleria täynnä SVG-pohjaiset mallit. Se on suunniteltu enemmän show-tapaukseksi, mutta lähdetiedostot ovat kaikki siellä kätevästi.

SVG-mallit alkaen svgeneration.com

svgeneration.com sisältää paljon SVG-malleja käyttöösi. Sivustossa on kunkin mallin muokkausvaihtoehdot, ja voit muokata koodia suoraan sivustolla nähdäksesi muutokset toiminnassa. Tämä ei ole vain hyvä resurssi valmiiksi valmistetuille kuvioille, mutta voit selvittää paljon siitä, miten ne on tehty ensisijaisesti.

SVG Clipart

Taidetta tämä sivusto on selvästi vanhanaikainen sarjakuva-tyyli. Se, aivan suoraan, ei ole mitä kaikki etsivät, mutta se on niille, jotka haluavat, että klassinen tuntuu kuvistaan.

SVG Studio

SVG Studio tarjoaa tuhansia kuvioita, joissa on selkeästi moderni tunnelma. Voit ostaa ne pieninä osajoukkoina tai ladata koko luettelon kerralla. Tämä asettaa sinut takaisin 500 dollaria, mikä 3000 kuvaa ei ole niin huono sopimus.

SVG suuremmilla varastosivustoilla

En voi sanoa paljon kummallakin sivustolla tarjotusta taidosta, koska se vaihtelee suuresti tekijällä, jolla ei ole yleistä tyyliä. Suurimmat nimet ovat istockphoto.com,shutterstock.com,bigstockphoto.com, ja canstockphoto.com.

SVG-inspiraatio

Voimme lukea kaikki haluamamme esittelyt ja seurata kaikkia opetusohjelmia siellä. Voimme tulla asiantuntijoiksi SVG-spesifikaation jokaisesta näkökulmasta, mutta silti voimme vielä olla uskomattoman tylsää siitä. Meidän on tarkasteltava kaikkia mahdollisia tekniikoita, jotta voimme hyödyntää sitä mahdollisimman tehokkaasti.

Se on usein helpommin sanottu kuin tehty. Se auttaa usein olemaan vertailupiste, jotain uskomatonta tarkastella ja näyttää meille tarkalleen millaisia ​​mahtavia asioita voimme tehdä sen kanssa, mitä meillä on. Sellaiset sivustot pitävät Webcreme teki web-suunnittelun yleensä. Se on mitä CSS Zen Garden, ja kaikki sen jälkeiset CSS-galleriat tekivät CSS-asettelua.

Tästä huolimatta en ole löytänyt mitään gallerio-sivustoja, jotka on omistettu SVG: n ja muiden verkkotekniikoiden avulla toteutettavien sovellusten avulla. Sillä välin tässä on esillä upeita tavaroita, jotka olemme löytäneet:

Snap Display Ad

Tämä esimerkki on osa Snap.svg kokoelma CodePenistä. Tarvitsetko täydellisen esimerkin siitä, miten SVG: tä voitaisiin käyttää mullistamaan online-mainokset? Tämä se on.

Ajattele sitä: jotkut mainostajat myyvät edelleen mainoksia pikselien koon perusteella. Tämä ei ole järkevää näyttökertojen äärettömän vaihtelun ikäisenä ja Retina-näytöt käynnistykseen. Ennen kuin saavutamme paremman järjestelmän kuin visuaaliset mainokset, SVG voisi ainakin auttaa meitä tekemään mainoksia sopivaksi web-suunnittelun reagoivaan luonteeseen.

Katso kynä Snap Display Ad esittäjä (t): CJ Gammon ( @cjgammon ) päällä CodePen .

Jtop-työpöydän käyttöliittymä

Mozillan kehittäjäverkosto, joka olen jatkuvasti mukana web-tekniikoiden tutkimisessa, on tuottanut myös joitain kiinnostavia juttuja SVG: llä. Esimerkiksi he menivät ja tekivät koko työpöydän käyttöliittymä joka perustuu täysin web-tekniikoihin, kuten HTML5, JS, SVG ja CSS. Se on nopea, muokattavissa, ja melkein haluan, että se oli osa todellista käyttöjärjestelmää.

Aikaa heijastusta

Tuonut meille ShinyDemos (joka on puolestaan ​​tuonut meille kansan klo Ooppera ) Aikaa heijastusta kirjaimellisesti vain peittää kellon live-syötteestä web-kamerastasi. Jos annat sen luvan, ja sinulla on todellakin kamera, joka tapauksessa. Mutta kohta on se, että se osoittaa, miten SVG-naamioita voidaan peittää lähes mistä tahansa.

oblurlay

CSS: n, SVG: n ja jQueryn, oblurlay luo täsmälleen sen nimensä: epäselvä overlay, iOS-tyyli. Se on jQuery-laajennus, joten toteutus ei ole vaikeaa, ja se näyttää kätevästi, miten SVG-suodattimia voidaan soveltaa kaikenlaisiin asioihin, ei pelkästään SVG-objekteihin.

Codrops demos

Codrops (aiemmin tutorials-osassa mainittu) on tuottanut melkoisia kiehtovia, vaikuttavia ja yksinkertaisia ​​demoja esittelemään mitä SVG voi tehdä. Jokainen ansaitsee oman osuutensa tässä artikkelissa, mutta on niin paljon, että laitan ne kaikki yhteen. Jos et katso mitään muuta tästä "Inspiraatio" -osiosta, katsokaa näitä. Tarkista demot ja lataa lähdetiedostot. Sitten kiitos kaverit Codropsissa. He ansaitsevat sen.

Huomaa: kaikki nämä eivät ole SVG-keskittyneet, mutta ne kaikki käyttävät SVG-grafiikkaa jollain tavalla.

Sivu tehokkuuden lisääminen : joukko luovia sivujen latausvaikutuksia, jotka käyttävät SVG-animaatioita Snap.svg: n avulla. Ajatuksena on näyttää päällekkäinen mielenkiintoinen muoto animaatio, kun uusi sisältö latautuu.

Ideat hienovaraisille hover-efekteille : jotain luovaa ja hienovaraista hover effect -inspiraatiota käyttäen moderneja CSS-tekniikoita, kuten 3D-käännöksiä ja pseudoelementtejä. He käyttävät myös SVG: tä. Mene tutustu esittely toisen vaikutusten joukkoon.

SVG piirustuksen animaatio : pieni kokeilu, joka tutkii SVG-viivan piirustusanimaatioiden käyttöä ennen grafiikan tai verkkosivustojen elementtien ulkoasua simuloimalla niiden lataamista.

Off-Canvas-valikon vaikutukset : jotain inspiraatiota off-canvas-valikkotoiminnoista ja -tyypeistä käyttämällä CSS-siirtymiä ja SVG-polun animaatioita.

Tooltip-tyylit Inspiraatio : pieni kokoelma eri hover tooltip-tyylejä ja vaikutuksia inspiraationa. Käyttämällä CSS-muunnoksia, raja-säteitä ja SVG-muotoja voimme luoda nykyaikaisia ​​ja mielenkiintoisia työkaluvintaa.

Ilmoitustavat Inspiraatio : muutamia yksinkertaisia ​​ideoita ja vaikutuksia huomaamattomille verkkosivustoilmoituksille. Pieniä skriptejä käytetään tiettyjen tyylien esittelyyn ja CSS-animaatioita käytetään vaikutuksiin.

Inspiraatio Custom Select -elementeille : jotain inspiraatiota valitun elementin mukautetun version muotoiluun. On monia mahdollisuuksia, ja tänään tutkimme joitain ideoita siitä, miten käyttäjän valita tyyliltään valinta.

Inspiraatio inline-ankkurointityyleille : jotain innoitusta luovaa ja modernia inline ankkuri tyylejä ja leijua vaikutuksia käyttäen erilaisia ​​tekniikoita, kuten pseudo-elementti siirtymät ja SVGs.

Nuolen navigointityylit : jotain inspiraatiota nuolenavigointityyleille ja hover-vaikutuksille käyttämällä nuolien SVG-kuvakkeita ja CSS-siirtymiä ja animaatioita vaikutuksille.

Wobbly Diaesitys -vaikutus : diaesityksen diat heiluttavat liikkumistaan. Vaikutus perustuu Sergei Valiukhin Dribbble-laukaukseen ja se on tehty käyttäen Snap.svg: tä ja SVG-polkujen muokkaamista. Huomaa, että tämä on erittäin kokeellista ja testattu vain uusimmissa uusissa versioissa nykyaikaisista selaimista.

Kääritään se ylös

SVG, vaikka se ei vielä ole yksi laajimmin käytetyistä kuvamuodoista, on hyvin dokumentoitu, voimakkaasti tuettu ja se on suuri osa Internetin tulevaisuutta. Jos et käytä sitä osana suunnitteluprosessia vielä, on todennäköisesti aika alkaa.

Esittelykuva, saumaton vektori kuva kautta Shutterstock.

• ← 10 ilmaista WordPress-laajennusta helmikuulle 2015
• 21 Yhteistyötyökalut, jotka helpottavat tiimityöskentelyä →