Transparantie toepassen op SVGs

SVG-afbeeldingen van Adobe Illustrator CC worden zelden overhandigd aan digitale ontwerpers met achtergronden. Normaal gesproken zweven de afbeeldingen boven elke achtergrond in de website, app, animatie of interactieve context.

Voordat u bespreekt wat er komt kijken bij het weghalen van de achtergrond achter SVG-illustraties, moet u zich concentreren op het toepassen van transparantie op SVG-afbeeldingen. U moet de dekking van illustraties definiëren met behulp van het deelvenster Transparantie. Er is bijvoorbeeld 50 procent transparantie toegepast op de gele vorm in de afbeelding en u kunt de transparantie in werking zien. En ja, die afbeelding is een SVG-bestand, met alle lichtgewicht, snel ladende en oneindig schaalbare functies die in SVG zijn ingebouwd.

Een semi-dekkende SVG-vorm op een gekleurde achtergrond.

Hoe SVG's met transparante achtergronden uit te voeren

Ontwerpers zijn gewend te denken in achtergronden die transparant worden gemaakt of zichtbaar blijven. We denken erover om een ​​achtergrond uit te schakelen. PNG-afbeeldingen en GIF-afbeeldingen werken zo: u maakt ofwel met een achtergrond of u kiest een transparante achtergrond in een programma zoals Illustrator of Photoshop om die achtergrond uit te schakelen.

Met GIF's en PNG's kunt u één transparante kleur hebben waarmee de achtergrondkleuren of afbeeldingen in webpagina's kunnen worden weergegeven. Maar de logica van het weghalen van de achtergrond is bij een SVG-bestand anders dan bij PNG's en GIF's. In wezen bestaat er niet zoiets als een SVG-afbeelding met een niet-transparante achtergrond omdat er geen achtergrond is. Met andere woorden: standaard worden SVG-afbeeldingen zonder achtergrond opgeslagen en geëxporteerd.

Wat is het probleem? Welnu, het is gemakkelijk om per ongeluk een transparante achtergrond te krijgen bij het opslaan of exporteren van SVG-bestanden! De volgende afbeelding heeft mogelijk een witte achtergrond of een transparante achtergrond. Dat zie je niet alleen door naar het Illustrator-scherm te kijken; u moet Beeld → Transparantieraster tonen kiezen.

Deze afbeelding kan een witte achtergrond hebben of geen achtergrond.

Als Transparantieraster is ingeschakeld, zoals weergegeven, kunt u zien dat de vogel een witte rechthoek erachter heeft en dat die witte achtergrond bij de afbeelding past als u het bestand opslaat als een SVG of het als een SVG exporteert.

Als u het transparantieraster bekijkt, ziet u een witte rechthoek achter de afbeelding.

Laat me dit vanuit een andere hoek benadrukken en belichten. Wanneer ik deze afbeelding ga exporteren als een SVG, heeft het weergegeven dialoogvenster Exporteren voor schermen geen optie voor het selecteren van een transparantiekleur.

U kunt in SVG geen transparantiekleur kiezen omdat er geen achtergrondkleur is.

Ik kom vaak ontwerpers tegen die erop staan ​​een achtergrondrechthoek achter hun SVG-bestemde illustraties te plaatsen, zodat ze kunnen zien hoe de afbeelding eruit zal zien wanneer ze op de achtergrond worden geplaatst door een kleur in het doelmedium (zoals een webpagina of app). Dat is oké, ik waarschuw ze, zolang je eraan denkt om die achtergrondrechthoek te verwijderen wanneer je de SVG opslaat of exporteert. En wie heeft er in de huidige wereld van hoge druk, hoge productiviteit en snelle doorlooptijd nog iets nodig om te onthouden?

Een betere oplossing is om een ​​transparant "raster" te definiëren met een enkele kleur die past bij de omgeving waarin de afbeelding wordt geplaatst. Waarom zet ik raster tussen aanhalingstekens? Omdat deze techniek vals speelt: hiermee definieert u beide rasterkleuren als dezelfde kleur, waardoor in feite een webpagina of een app-achtergrondkleur wordt gesimuleerd.

Volg deze stappen om die techniek te gebruiken om een ​​aangepaste achtergrond te maken terwijl u SVG-illustraties ontwikkelt:

Kies Bestand → Documentinstellingen.

Zoek op het tabblad Algemeen het gedeelte Transparantie- en overdrukopties.
De wijzigingen die u wilt, worden beheerd in dit gedeelte van het dialoogvenster.
Maak je geen zorgen over het definiëren van de rastergrootte, want je doet in feite afstand van het raster.

Klik in het gedeelte Transparantieraster van het dialoogvenster op de eerste van de twee rasterkleurenpanelen en kies een achtergrondkleur met behulp van een van de verschillende kleurenpaletten in het pop-upvenster Kleuren in de volgende afbeelding.
Geen van deze kleurenpaletten is trouwens bijzonder digitaal vriendelijk. Er is geen palet voor RGBA, hexadecimale of andere standaard webkleurformaten, maar de eyedropper van de kleurkiezer kan u helpen de achtergrondkleur te krijgen die u wilt matchen.

Een voorbeeldachtergrondkleur definiëren met een Transparantieraster.

Selecteer de tweede van de twee rasterkleurenpanelen en wijs er dezelfde kleur aan toe.
Vergeet niet dat u de eyedropper van de kleurkiezer kunt gebruiken om die kleur te pakken.

Klik op OK in het dialoogvenster Documentinstelling.

Het enige dat ik in de vorige reeks stappen heb gedaan, was definiëren hoe het transparantieraster wordt weergegeven wanneer het is ingeschakeld . Dus als uw transparantieraster niet is ingeschakeld, kiest u Beeld → Transparantieraster.

In deze afbeelding heb ik het tekengebied met de afbeelding geselecteerd en ik bekijk een voorbeeld van het project tegen een gesimuleerde achtergrondkleur.

Een voorbeeld van de achtergrondkleur van de uitvoer bekijken met een aangepast Transparantieraster.

Transparantie-effecten toepassen op SVG

Wanneer transparantie (zoals 50 procent dekking) of transparantie-effecten zoals inbranden, donkerder of vermenigvuldigen worden toegepast op SVG-afbeeldingen, behouden deze effecten de schaalbaarheid van SVG.

Deze afbeelding toont dezelfde afbeelding - drie semi-transparante oranje rechthoeken - geëxporteerd als een PNG-bestand (bovenaan) en een SVG. Je kunt zien hoe het PNG-bestand in kwaliteit achteruitgaat als ik erop inzoom in een browser. Wat je niet kunt zien, is dat het PNG-bestand bijna twee keer zo groot is als het SVG-bestand.

PNG-uitvoer (bovenaan) vergelijken met SVG wanneer transparantie is toegepast

Hier volgt een samenvatting van de voordelen van het gebruik van SVG voor transparantie-effecten:

• De bestandsgrootte is kwalitatief kleiner.
• Een web- of app-ontwikkelaar kan de transparantiewaarden aanpassen of bewerken en interactiviteit toewijzen.
• Het beeld en de transparantie zullen niet verslechteren, ongeacht hoe sterk op het bestand wordt ingezoomd.

Trouwens, als je nieuwsgierig bent naar hoe de gegenereerde SVG-code voor deze set rechthoeken eruitziet, en hoe gemakkelijk het is voor een web- of app-ontwikkelaar om ermee te werken, hier is de code voor de eerste van de drie SVG-vakken , met een ondoorzichtigheid van 60 procent toegepast:

<="" code="">