SVG-mallien vienti

Se oli, että voit vain pudottaa leikattavan kuvan gif tai jpg 72dpi ja laatoitella sen CSS. Se on yleinen käytäntö web-suunnittelijoiden keskuudessa, ja se on ollut jo vuosia; se on nopea ja helppo tapa lisätä kuvio tai tekstuuri työhösi. Sitten ne ikävä bods yli Applen julkaisi retina näyttää ja ennen kuin tiesimme sen pikseli ei ollut pikseli enää. Yhtäkkiä nämä rakastetut kuviot muuttuivat historiaksi.

SVG: t (Scaleable Vector Graphics) ovat nopeasti tulossa standardiksi kirkkaille grafiikoille Webissä. He ratkaisevat ongelman, jonka mukaan erilliset kuvatiedostot on luotava verkkokalvon laitteiden mukauttamiseksi. He ovat todella hauskoja ja helppoja luoda ja he avaavat mahdollisuuksia.

Vaihe 1: Luo kuvio

On olemassa kymmeniä eri sovelluksia, joiden avulla voit suunnitella SVG-kuvion. Oma suosikki on Illustrator, joten käytän sitä.

Avaa Adobe Illustrator ja luo uusi asiakirja, joka on 300px 300px. Siirry sitten kohtaan Object> Pattern> Make ja kangas muuttuu. Huomaat, että taustanäytön keskellä on sininen neliö. Myös malliasetuspaneeli on auki.

Meidän on tehtävä pieni säätö ennen aloittamista. Siirry mallinvalintapaneeliin ja poista valinta, joka sanoo siirrä laatta taiteen avulla. (Tämä ominaisuus on ärsyttävää, koska et voi siirtää tai sijoittaa piirustustasi kuvion neliöön. Se liikkuu sen kanssa, jos et poista tätä vaihtoehtoa.)

Seuraavaksi taivas on raja, minkä tyyppistä kuvioita voit luoda. Oletuksena kuvion neliö on asetettu 100px x 100px. Voit soittaa haluamallesi koolle. Olen jättänyt minun oletusarvoisesti.

Seuraavaksi piirrä neliö, 50px 50px. Kohdista se neliön ylä- ja oikean reunan kanssa.

Napsauta hiiren painiketta hiiren yläpuolella Pen Tool -työkalun päälle . Alatyökalut näkyvät, jolloin voit valita Lisää ankkuripistetyökalu . Täältä lisää ankkurointipiste neliön vasemman ja oikean sivun keskelle.

Suoravalintatyökalun avulla valitse ankkipisteet (pidä siirtyä valitaksesi molemmat.) Valitse sitten ylävalikosta Object> Transform> Siirrä.

Siirrä kaksi pistettä 20px oikealle muodostamaan eräänlainen nuoli.

Seuraavaksi kopioi muoto vetämällä se uuteen kohtaan pitäen alas näppäintä alhaalla. (Tai kopioi ja liitä, jos haluat.)

Valitse uusi muoto ja vedä se kuvion neliön vasemmassa alakulmassa.

Kun muoto on vielä valittu, tartu nurkkaan ja kierrä sitä 180 astetta. (Pidä vaihtonäppäintä alhaalla, kunnes napsautat tarkalleen 180 astetta.)

Valitse ylävalikosta Object> Transform> Siirrä ja siirrä uusi muoto -20px.

Napsauta lopuksi Tallenna kopio- painiketta ikkunan yläosassa, kirjoita kuvio ja tallenna kuvio loppuun. Tallenna kopio on tärkeä, jos haluat muokata sitä myöhemmin. Tämä estää sinua tekemästä sitä uudestaan.

Vaihe 2: Vie kuvio

Huomaat, että kun poistut kuvamoodista, kuvio valitaan automaattisesti täyttönä. Sinun tarvitsee vain piirtää kuvio taidegrafiin ja se täytetään kuvioilla. (Jos jostain syystä olet muuttanut täyttöä muodolla, voit löytää mallin värimallit-paneelissa ja käyttää sitä kuten mikä tahansa muu täyttö.)

Seuraavaksi muokata muotoasi niin, että se kattaa koko 300px 300px taulun.

Valitse Tiedosto> Tallenna nimellä. Tallenna tiedosto nimellä .svg.

Seuraavaksi tulee valintaikkuna, jossa voit valita eri SVG-muodoista ja vaihtoehdoista. Varmista, että napsautat lisävaihtoehtoja, vasemmassa alakulmassa nähdäksesi kaikki SVG-tiedostosi käytettävissä olevat vaihtoehdot.

Tyypillinen muoto on SVG 1.1, koska se on yleisimmin käytetty ja laajin tuettu SVG-formaatti. Tässä valikossa voit myös valvoa, säilytetäänkö voit muokata SVG: ää Illustratorissa vai sallitko tekstiä reitillä, joka voi olla kätevä. Sinulla on mahdollisuus käyttää SVG: tä varsinaisena tiedostona tai voit kopioida koodin ja liittää sen suoraan html-dokumenttiin. Kun olet valmis, valitse OK.

Vaihe 3: Muokkaa SVG-kuvio

Avaa .svg-tiedosto tekstieditorissa. Käytän Sublime Text -muotoa, mutta voit käyttää Notepadia, Dreamweaveria tai mitä tahansa HTML-koodia.

Avaa sama tiedosto selaimessa, jotta voit esikatsella tekemäsi muutokset koodiin.

On keskityttävä muutamiin eri alueisiin. Ensinnäkin meidän on muokattava SVG-tiedoston rajoja, jotta se täyttää selaimen.

Tulet näkemään: pohjalla. Vaihda molemmat arvot 300-100%. Joten koodisi näyttää:

Et saa huomata muutosta vielä. Sen pitäisi silti olla neliö. Miksi? Koska katselukenttä on asetettu 300 x 300, jotka ovat neliömittoja. Jos haluat täyttää selaimen leveyden ja korkeuden, muuta rivillä 4 näkyvä koodi viewBox = "0 0 300 300" viewBox = "0 0 100% 100%" .

Kun päivitämme selaimen, malli täyttää selaimemme loppuun. Ongelmana on, mitä haluat muuttaa kuvion kokoa? Palatko Illustratorille ja palaat kaiken uudestaan? Ei. Se on kauneus ottaa Illustrator luo SVG-koodisi. Voit muokata koodia. Älä ajattele sitä puhtaasti grafiikkatiedostona. Ajattele sitä kooditiedostona, jota voit manipuloida ja taipua tahtosi mukaan.

Muokkaa kuvion kokoa etsiä rivillä 5. Muuta leveyden ja korkeuden arvoa vain haluamaasi kohtaan. Suosittelisin, että se pysyy neliön mittasuhteissa, ellet halua vääristää kuvioitasi. Kun muutan arvot arvoon 70, kuvio on pienempi, mutta silti täyttää leveyden ja korkeuden näytölle.

Jos katsot koodia, näet, että kuvio koostuu monikulmioista. Ensimmäisellä monikulmalla on täyttö "ei" (joka tuottaa valkoista) ja loput on hex-arvot.

Jos haluat muuttaa kuvion värejä, meidän on vain vaihdettava täyttöarvoja.

Jos olet sellainen henkilö, joka haluaa kopioida ja liittää, tässä on lopullinen SVG-koodi:

Se on täysin kelvollinen, mutta se on hieman sekava (kiitos Illustrator). Joten suosittelen optimoimista ennen kuin käytät sitä. On olemassa paljon optimointivaihtoehtoja, mutta Peter Collingridge's on yksi parhaista, se antaa meille tämän lopullisen koodin:

johtopäätös

Ottaen mahdollisuuden viedä Illustrator-värimallit ja -kuvasi SVG: einä avautuu runsaasti mahdollisuuksia. Ei vain voit luoda SVG-kuvioita, voit muokata tiedostoa muutamassa minuutissa, valvoa värejä, kokoja ja miten tiedosto itsessään tehdään selaimessa.