Kuinka käyttää läpinäkyvyyttä SVG-tiedostoihin

Adobe Illustrator CC:n SVG-grafiikkaa luovutetaan harvoin digitaalisille suunnittelijoille, joilla on tausta. Yleensä grafiikka kelluu verkkosivustolla, sovelluksessa, animaatiossa tai interaktiivisessa kontekstissa olevan taustan yläpuolella.

Ennen kuin keskustelet siitä, mikä liittyy SVG-taiteen taustan poistamiseen, keskity läpinäkyvyyden käyttämiseen SVG-grafiikassa. Sinun on määritettävä kuvien läpinäkyvyys Läpinäkyvyys-paneelin avulla. Esimerkiksi kuvan keltaiseen muotoon on lisätty 50 prosentin läpinäkyvyys, ja voit nähdä läpinäkyvyyden vaikuttavan. Ja kyllä, tuo kuva on SVG-tiedosto, jossa on kaikki kevyet, nopeasti latautuvat ja loputtomasti skaalautuvat ominaisuudet, jotka on rakennettu SVG:hen.

Puolinäkymätön SVG-muoto värillisen taustan päällä.

Kuinka tulostaa SVG-tiedostoja läpinäkyvällä taustalla

Suunnittelijat ovat tottuneet ajattelemaan taustoja, jotka joko tehdään läpinäkyviksi tai pysyvät näkyvissä. Ajattelemme taustan poistamista. PNG-kuvat ja GIF-kuvat toimivat näin – joko luot taustalla tai valitset läpinäkyvän taustan ohjelmassa, kuten Illustratorissa tai Photoshopissa, poistamaan taustan.

GIF- ja PNG-kuvien avulla sinulla voi olla yksi läpinäkyvä väri, jonka avulla taustavärit tai kuvat näkyvät verkkosivuilla. Mutta taustan poistamisen logiikka on erilainen SVG-tiedostossa kuin PNG- ja GIF-tiedostoissa. Pohjimmiltaan ei ole olemassa sellaista asiaa kuin SVG-grafiikka, jonka tausta ei ole läpinäkyvä, koska taustaa ei ole. Toisin sanoen: oletusarvoisesti SVG-grafiikka tallentaa ja viedä ilman taustaa.

Joten mikä on ongelma? No, on helppo päätyä vahingossa läpinäkyvään taustaan ​​tallennettaessa tai vietäessä SVG-tiedostoja! Seuraavassa kuvassa voi olla valkoinen tausta tai sen tausta voi olla läpinäkyvä. Et voi tietää vain katsomalla Illustratorin näyttöä; sinun on valittava Näytä → Näytä läpinäkyvyysruudukko.

Tässä grafiikassa voi olla valkoinen tausta tai siinä voi olla taustaa.

Kun läpinäkyvyysruudukko on käytössä, kuten kuvassa, voit nähdä, että linnun takana on valkoinen suorakulmio ja että valkoinen tausta "menee" kuvan mukana, jos tallennat tiedoston SVG-muodossa tai viet sen SVG-muodossa.

Läpinäkyvyysruudukkoa katseltaessa näkyy grafiikan takana valkoinen suorakulmio.

Haluan korostaa ja valaista tätä toisesta näkökulmasta. Kun aion viedä tämän kuvan SVG-muodossa, näytetyssä Vie näytöille -valintaikkunassa ei ole mahdollisuutta valita läpinäkyvyyden väriä.

Et voi valita läpinäkyvyyden väriä SVG:ssä, koska taustaväriä ei ole.

Tapaan usein suunnittelijoita, jotka vaativat taustasuorakulmion sijoittamista SVG:lle tarkoitetun taideteoksensa taakse, jotta he voivat nähdä, miltä grafiikka näyttää, kun taustalla on kohdemedian (kuten verkkosivun tai sovelluksen) väri. Ei hätää, varoitan heitä, kunhan muistat poistaa tuon taustasuorakulmion, kun tallennat tai viet SVG:tä. Ja nykypäivän korkean paineen, korkean tuottavuuden ja nopean kierron maailmassa, kuka tarvitsee vielä yhden asian muistettavana?

Parempi ratkaisu on määritellä läpinäkyvyys "ruudukko", jossa on yksi väri, joka sopii ympäristöön, johon grafiikka sijoitetaan. Miksi laitan ruudukon lainausmerkkeihin? Koska tämä tekniikka huijaa: Sen avulla määrität molemmat ruudukon värit samaksi väriksi, mikä simuloi tehokkaasti verkkosivun tai sovelluksen taustaväriä.

Voit käyttää tätä tekniikkaa mukautetun taustan luomiseen samalla, kun kehität SVG-kuvia, seuraavasti:

Valitse Tiedosto → Asiakirjan asetukset.

Etsi Yleiset-välilehdestä Läpinäkyvyys- ja päällepainatusasetukset -osio.
Haluttuja muutoksia ohjataan tässä valintaikkunan osassa.
Älä ole huolissasi ruudukon koon määrittämisestä, koska hylkäät ruudukon tehokkaasti.

Napsauta valintaikkunan Läpinäkyvyysruudukko-osiossa ensimmäistä kahdesta ruudukon väripaneelista ja valitse taustaväri käyttämällä yhtä seuraavassa kuvassa näkyvän Värit-ponnahdusikkunan väripaletteista.
Mikään näistä väripaleteista ei muuten ole erityisen digitaalinen. Ei ole palettia RGBA-, heksadesimaali- tai muille tavallisille verkkovärimuodoille, mutta värinvalitsin voi auttaa sinua saamaan haluamasi taustavärin.

Esikatselun taustavärin määrittäminen läpinäkyvyysruudukolla.

Valitse toinen kahdesta ruudukon väripaneelista ja määritä sille sama väri.
Muista, että voit käyttää värinvalitsimen pipettiä nappataksesi tämän värin.

Napsauta OK Asiakirjan asetukset -valintaikkunassa.

Olen tehnyt edellisissä vaiheissa vain sen, miten läpinäkyvyysruudukko näkyy, kun se on käytössä . Joten jos läpinäkyvyysruudukko ei ole käytössä, valitse Näytä → Läpinäkyvyysruudukko.

Tässä kuvassa valitsin taulun, jossa on grafiikka, ja esikatselen projektia simuloitua taustaväriä vasten.

Tulosteen taustavärin esikatselu mukautetulla läpinäkyvyysruudukolla.

Käytä läpinäkyvyystehosteita SVG:ssä

Kun SVG-grafiikkaan käytetään läpinäkyvyyttä (kuten 50 prosentin peittävyyttä) tai läpinäkyvyystehosteita, kuten väripolttoa, tummenemista tai moninkertaisuutta, nämä tehosteet säilyttävät SVG:n skaalautuvuuden.

Tässä kuvassa näkyy sama grafiikka – kolme puoliläpinäkyvää oranssia suorakulmiota – vietynä PNG-tiedostona (ylhäällä) ja SVG-muodossa. Voit nähdä, kuinka PNG-tiedoston laatu heikkenee, kun lähetän sitä selaimessa. Et voi nähdä, että PNG-tiedosto on melkein kaksi kertaa suurempi kuin SVG.

PNG-lähdön (ylhäällä) vertaaminen SVG:hen, kun läpinäkyvyyttä käytetään

Tässä on yhteenveto SVG:n käytön eduista läpinäkyvyystehosteissa:

• Tiedoston koko on laadullisesti pienempi.
• Verkko- tai sovelluskehittäjä voi säätää tai muokata läpinäkyvyysarvoja ja määrittää interaktiivisuutta.
• Kuva ja läpinäkyvyys eivät heikkene riippumatta siitä, kuinka paljon tiedostoa zoomataan.

Muuten, jos olet utelias siitä, miltä tälle suorakulmiojoukolle luotu SVG-koodi näyttää ja kuinka helppoa verkko- tai sovelluskehittäjän on työskennellä sen kanssa, tässä on koodi ensimmäiselle kolmesta SVG-laatikosta. , 60 prosentin peittävyydellä:

<="" code="">