Com aplicar la transparència als SVG

Els gràfics SVG d' Adobe Illustrator CC poques vegades es lliuren als dissenyadors digitals amb fons. Normalment, els gràfics suren per sobre del fons que hi hagi al lloc web, l'aplicació, l'animació o el context interactiu.

Abans de parlar del que implica eliminar el fons darrere de les obres d'art SVG, centreu-vos a aplicar transparència als gràfics SVG. Heu de definir l'opacitat de l'obra d'art mitjançant el tauler Transparència. Per exemple, s'ha aplicat un 50 per cent de transparència a la forma groga de la figura i podeu veure la transparència en efecte. I sí, aquesta imatge és un fitxer SVG, amb totes les funcions lleugeres, de càrrega ràpida i infinitament escalables integrades a SVG.

Una forma SVG semiopaca sobre un fons de color.

Com sortir SVG amb fons transparents

Els dissenyadors estan acostumats a pensar en termes de fons que es fan transparents o es mantenen visibles. Pensem a eliminar un fons. Les imatges PNG i GIF funcionen així: creeu amb un fons o trieu un fons transparent en un programa com Illustrator o Photoshop per eliminar aquest fons.

Amb GIF i PNG, podeu tenir un color transparent que permeti que els colors de fons o les imatges es mostrin a les pàgines web. Però la lògica d'eliminar el fons és diferent en un fitxer SVG que amb PNG i GIF. Essencialment, no hi ha cap gràfic SVG que tingui un fons no transparent perquè no hi ha fons. En altres paraules: per defecte els gràfics SVG es guarden i exporten sense fons.

Aleshores, quin és el problema? Bé, és fàcil acabar accidentalment amb un fons transparent quan deseu o exporteu fitxers SVG! La figura següent pot tenir un fons blanc o pot tenir un fons transparent. No es pot dir només mirant la pantalla d'Illustrator; heu de triar Visualització → Mostra la graella de transparència.

Aquest gràfic pot tenir un fons blanc o no tenir fons.

Amb la quadrícula de transparència activada, com es mostra, podeu veure que l'ocell té un rectangle blanc al darrere i que el fons blanc "anirà amb" el gràfic si deseu el fitxer com a SVG o l'exporteu com a SVG.

En veure la quadrícula de transparència, es mostra un rectangle blanc darrere del gràfic.

Permeteu-me subratllar-ho i posar-hi llum des d'un altre angle. Quan vaig a exportar aquesta imatge com a SVG, el diàleg Exporta per a pantalles, que es mostra, no té cap opció per seleccionar un color de transparència.

No podeu triar un color de transparència en SVG perquè no hi ha color de fons.

Sovint em trobo amb dissenyadors que insisteixen a posar un rectangle de fons darrere de la seva obra d'art destinada a SVG perquè puguin veure com es veurà el gràfic quan tingui un color de fons en el mitjà objectiu (com ara una pàgina web o una aplicació). Està bé, els adverteixo, sempre que recordeu eliminar aquest rectangle de fons quan deseu o exporteu l'SVG. I en el món actual d'alta pressió, alta productivitat i ràpid canvi, qui necessita una cosa més per recordar?

Una millor solució és definir una "quadrícula" de transparència amb un sol color que coincideixi amb l'entorn on es col·locarà el gràfic. Per què poso la graella entre cometes? Com que aquesta tècnica fa trampes: amb ella, definiu els dos colors de la quadrícula com el mateix color, simulant de manera efectiva el color de fons d'una pàgina web o d'una aplicació.

Per utilitzar aquesta tècnica per crear un fons personalitzat mentre desenvolupeu obres d'art SVG, seguiu aquests passos:

Trieu Fitxer → Configuració del document.

A la pestanya General, cerqueu la secció Opcions de transparència i sobreimpressió.
Els canvis que voleu es controlen en aquesta secció del diàleg.
No us preocupeu per definir la mida de la quadrícula perquè esteu prescindint efectivament de la quadrícula.

A la secció Quadrícula de transparència del diàleg, feu clic al primer dels dos panells de color de la quadrícula i trieu un color de fons utilitzant una de les diferents paletes de colors a la finestra emergent Colors que es mostra a la figura següent.
Cap d'aquestes paletes de colors és especialment amigable amb els digitals, per cert. No hi ha cap paleta per a formats de color web estàndard, RGBA, hexadecimal o altres, però el comptegotes del selector de colors us pot ajudar a obtenir el color de fons que voleu que coincideixi.

Definició d'un color de fons de previsualització amb una quadrícula de transparència.

Seleccioneu el segon dels dos panells de color de la quadrícula i assigneu-li el mateix color.
Recordeu que podeu utilitzar el comptagotes del selector de colors per agafar aquest color.

Feu clic a D'acord al diàleg Configuració del document.

Tot el que he fet en el conjunt de passos anterior ha estat definir com es mostra la quadrícula de transparència quan està activada . Per tant, si la vostra quadrícula de transparència no està activada, trieu Visualització → quadrícula de transparència.

En aquesta figura, he seleccionat la taula de treball amb el gràfic i estic previsualitzant el projecte amb un color de fons simulat.

Previsualització del color de fons de sortida amb una quadrícula de transparència personalitzada.

Apliqueu efectes de transparència a SVG

Quan s'apliquen transparència (com ara un 50 per cent d'opacitat) o efectes de transparència com ara la crema de color, l'enfosquiment o la multiplicació als gràfics SVG, aquests efectes conserven l'escalabilitat de l'SVG.

Aquesta figura mostra el mateix gràfic (tres rectangles taronges semitransparents) exportat com a fitxer PNG (a dalt) i SVG. Podeu veure com el fitxer PNG es degrada en qualitat quan l'amplio en un navegador. El que no podeu veure és que el fitxer PNG és gairebé el doble de gran que l'SVG.

Comparació de la sortida PNG (a dalt) amb SVG quan s'aplica la transparència

Aquí teniu un resum dels avantatges d'utilitzar SVG per als efectes de transparència:

• La mida del fitxer és qualitativament més petita.
• Un desenvolupador web o d'aplicacions pot modificar o editar els valors de transparència i assignar interactivitat.
• La imatge i la transparència no es degradaran per molt que s'ampliï el fitxer.

Per cert, si teniu curiositat per saber com és el codi SVG generat per a aquest conjunt de rectangles i com de fàcil és per a un desenvolupador web o d'aplicacions treballar-hi, aquí teniu el codi del primer dels tres quadres SVG. , amb un 60% d'opacitat aplicat:

<="" code="">