SVG

Bestandsindelingen voor bitmapafbeeldingen op het web, zoals .GIF, .JPEG, .WBMP en .PNG, beschrijven afbeeldingen aan de hand van een pixelraster. De resulterende bestanden zijn vaak groot, beperkt tot één (vaak lage) resolutie en vereisen veel bandbreedte op het web. SVG is daarentegen een vectorindeling waarin afbeeldingen worden beschreven als vormen, paden, tekst en filtereffecten. De resulterende bestanden zijn compact en bieden de beste afbeeldingen op het web, in afgedrukte vorm en zelfs op mobiele apparatuur met beperkte capaciteit. Gebruikers kunnen een SVG-afbeelding op het scherm vergroten zonder verlies van scherpte, details of helderheid. Daarnaast biedt SVG betere ondersteuning voor tekst en kleuren, waardoor gebruikers de afbeeldingen zien zoals ze op het Illustrator-tekengebied worden weergegeven.

De SVG-indeling is volledig gebaseerd op XML en biedt veel voordelen voor zowel ontwikkelaars als gebruikers. Met de SVG-indeling kunt u in XML en JavaScript webafbeeldingen maken die aan de hand van geavanceerde effecten, zoals markeringen, knopinfo, audio en animaties, reageren op handelingen van gebruikers.

U kunt illustraties in de SVG-indeling opslaan met de opdrachten Opslaan, Opslaan als, Kopie opslaan en Opslaan voor web en apparaten. Als u toegang wilt tot alle exportopties voor SVG, gebruikt u de opdracht Opslaan, Opslaan als of Kopie opslaan. De opdracht Opslaan voor web en apparaten biedt een subset SVG-exportopties die van toepassing zijn op webillustraties.

Voor een video over het maken van inhoud voor mobiele apparaten met Illustrator, ga naar www.adobe.com/go/vid0207_nl.

De manier waarop u een illustratie instelt in Illustrator heeft gevolgen voor het uiteindelijke SVG-bestand. Neem de volgende richtlijnen in acht:

  • Voeg met gebruik van lagen een structuur toe aan het SVG-bestand. Wanneer u een illustratie opslaat in de SVG-indeling, wordt iedere laag omgezet in een groepselement (<g>). (Een laag met de naam Knop1 wordt in het SVG-bestand bijvoorbeeld <g id="Knop1_ver3.0">.) Geneste lagen worden geneste SVG-groepen en verborgen lagen blijven behouden met de SVG-stijleigenschap display="none".

  • Als u objecten op verschillende lagen transparant wilt maken, past u de dekking van ieder object aan in plaats van iedere laag. Als u de dekking op laagniveau wijzigt, ziet u in het SVG-bestand niet de transparantie die wordt weergegeven in Illustrator.

  • Rastergegevens zijn niet schaalbaar in de SVG-viewer en kunnen, in tegenstelling tot andere SVG-elementen, niet worden bewerkt. Maak, indien mogelijk, dus geen illustraties die worden gerasterd in het SVG-bestand. Verloopnetten en objecten die gebruikmaken van de effecten Rasteren, Artistiek, Vervagen, Penseelstreek, Vervorm, Pixel, Verscherpen, Schets, Stileer, Structuur en Video worden gerasterd wanneer deze worden opgeslagen in de SVG-indeling. Afbeeldingsstijlen met deze effecten produceren ook rastering. Gebruik SVG-filtereffecten om grafische elementen toe te voegen zonder rastering.

  • Gebruik symbolen en vereenvoudig de paden in uw illustraties om betere resultaten te bereiken met SVG. Als de prestaties van essentieel belang zijn, kunt u bovendien beter geen penselen gebruiken die veel padgegevens produceren, zoals Houtskool, As van vuur en Meerlijnspen.

  • Gebruik segmenten, afbeeldingen met hyperlinks, en scripts om webkoppelingen toe te voegen aan een SVG-bestand.

  • Een scripttaal, zoals JavaScript, maakt onbeperkte functionaliteit mogelijk voor een SVG-bestand. Muisbewegingen en toetsenbordopdrachten kunnen scriptfuncties, zoals rollovereffecten, activeren. Scripts kunnen ook het documentobjectmodel (DOM) gebruiken om het SVG-bestand te openen en te wijzigen, bijvoorbeeld om SVG-elementen in te voegen of te verwijderen.

SVG-effecten toepassen

U kunt SVG-effecten gebruiken om grafische eigenschappen, zoals slagschaduwen, aan een illustratie toe te voegen. SVG-effecten verschillen van vergelijkbare bitmapeffecten, omdat ze op XML zijn gebaseerd en niet afhankelijk zijn van de resolutie. In feite is een SVG-effect niets meer dan een serie XML-eigenschappen waarmee verschillende wiskundige bewerkingen worden beschreven. Het resulterende effect wordt naar het doelobject gerenderd in plaats van naar de bronafbeelding.

Illustrator bevat een standaardset SVG-effecten. U kunt de effecten gebruiken met de standaardeigenschappen, de XML-code bewerken om aangepaste effecten te maken of nieuwe SVG-effecten schrijven.

Opmerking:

U kunt de standaard SVG-filters van Illustrator wijzigen met een teksteditor. U bewerkt dan het bestand Adobe SVG Filters.svg in de map Documents and Settings/<gebruikersnaam>/Application Data/Adobe/Adobe Illustrator CS5 Settings/<locatie>. U kunt bestaande filterdefinities aanpassen, filterdefinities verwijderen en nieuwe filterdefinities toevoegen.

  1. Selecteer een object of groep (of selecteer een laag in het deelvenster Lagen).
  2. Voer een van de volgende handelingen uit:
    • Als u een effect wilt toepassen met de standaardinstellingen, kiest u het effect in het onderste segment van het submenu Effect > SVG-filters.

    • Kies Effect > SVG-filters > SVG-filter toepassen om een effect toe te passen met aangepaste instellingen. Selecteer het effect in het dialoogvenster en klik op de knop SVG-filter bewerken . Voer de standaardcode in en klik op OK.

    • Kies Effect > SVG-filters > SVG-filter toepassen om een nieuw effect te maken en toe te passen. Klik op de knop Nieuw SVG-filter in het dialoogvenster, voer de nieuwe code in en klik op OK.

      Wanneer u een SVG-filtereffect toepast, wordt een gerasterde versie van het effect weergegeven in het tekengebied. U kunt de resolutie van deze voorvertoningsafbeelding instellen door de rasterresolutie van het document te wijzigen.

      Opmerking: Wanneer meerdere effecten op een object zijn toegepast, moet het SVG-effect het laatste effect zijn. Oftewel: Het effect moet onder in het deelvenster Vormgeving worden weergegeven (net boven het item Transparantie). Als het SVG-effect wordt gevolgd door andere effecten, bestaat de SVG-uitvoer uit een rasterobject.

Effecten uit een SVG-bestand importeren

  1. Kies Effect > SVG-filters > SVG-filter importeren.
  2. Selecteer het SVG-bestand waaruit u effecten wilt importeren en klik op Openen.

Overzicht van het deelvenster SVG-interactiviteit

In het deelvenster SVG-interactiviteit (Venster > SVG-interactiviteit) kunt u interactiviteit aan uw illustratie toevoegen wanneer u de illustratie exporteert voor weergave in een webbrowser. Door bijvoorbeeld een gebeurtenis te maken die een JavaScript-opdracht activeert, kunt u snel beweging op een webpagina maken wanneer de gebruiker de cursor boven een object houdt of een andere handeling uitvoert. Met het deelvenster SVG-interactiviteit kunt u ook alle gebeurtenissen en JavaScript-bestanden weergeven die aan het huidige bestand zijn gekoppeld.

Een gebeurtenis verwijderen uit het deelvenster SVG-interactiviteit

  • Als u een gebeurtenis wilt verwijderen, selecteert u de gebeurtenis en klikt u op de knop Verwijderen of kiest u Gebeurtenis verwijderen in het deelvenstermenu.
  • Als u alle gebeurtenissen wilt verwijderen, kiest u Gebeurtenissen wissen in het deelvenstermenu.

Aan een bestand gekoppelde gebeurtenissen toevoegen, vermelden of verwijderen

  1. Klik op de knop JavaScript-bestanden koppelen .
  2. Selecteer een JavaScript-vermelding in het dialoogvenster JavaScript-bestanden en voer een van de volgende handelingen uit:
    • Klik op Toevoegen om te navigeren naar aanvullende JavaScript-bestanden.

    • Klik op Verwijderen om de geselecteerde JavaScript-vermelding te verwijderen.

SVG-interactiviteit toevoegen aan illustraties

  1. Selecteer een gebeurtenis in het deelvenster SVG-interactiviteit (Zie SVG-gebeurtenissen.)
  2. Voer de bijbehorende JavaScript in en druk op Enter.

SVG-gebeurtenissen

onfocusin

De gebeurtenis wordt geactiveerd wanneer de focus op het element is gericht, bijvoorbeeld wanneer het object met de aanwijzer wordt geselecteerd.

onfocusout

De gebeurtenis wordt geactiveerd wanneer de focus niet meer op het element is gericht (vaak omdat de focus op een ander element wordt gericht).

onactivate

De gebeurtenis wordt met een muisklik of het toetsenbord geactiveerd, afhankelijk van het SVG-element.

onmousedown

De gebeurtenis wordt geactiveerd wanneer de muisknop op een element wordt ingedrukt.

onmouseup

De gebeurtenis wordt geactiveerd wanneer de ingedrukte muisknop op een element wordt losgelaten.

onclick

De gebeurtenis wordt geactiveerd wanneer er met de muisknop op een element wordt geklikt.

onmouseover

De gebeurtenis wordt geactiveerd wanneer de aanwijzer op een element wordt geplaatst.

onmousemove

De gebeurtenis wordt geactiveerd wanneer de aanwijzer zich op een element bevindt.

onmouseout

De gebeurtenis wordt geactiveerd wanneer de aanwijzer van een element af wordt verplaatst.

onkeydown

De gebeurtenis wordt geactiveerd wanneer een toets wordt ingedrukt.

onkeypress

De gebeurtenis wordt geactiveerd terwijl een toets is ingedrukt.

onkeyup

De gebeurtenis wordt geactiveerd wanneer een toets wordt losgelaten.

onload

De gebeurtenis wordt geactiveerd nadat het SVG-document volledig door de browser is ontleed. Gebruik deze gebeurtenis als u eenmalige initialisatiefuncties wilt aanroepen.

onerror

De gebeurtenis wordt geactiveerd wanneer een element niet juist is geladen of wanneer er een andere fout optreedt.

onabort

De gebeurtenis wordt geactiveerd wanneer het laden van de pagina wordt afgebroken voordat het element volledig is geladen.

onunload

De gebeurtenis wordt geactiveerd wanneer het SVG-document uit een venster of kader wordt verwijderd.

onzoom

De gebeurtenis wordt geactiveerd wanneer het zoomniveau van het document wordt gewijzigd.

onresize

De gebeurtenis wordt geactiveerd wanneer de grootte van de documentweergave wordt gewijzigd.

onscroll

De gebeurtenis wordt geactiveerd wanneer de documentweergave wordt geschoven of gepand.

Voor het web geoptimaliseerde opties voor SVG-export

Er is een nieuwe optie voor SVG-export (Bestand > Exporteren > SVG). Met de nieuwe workflow maakt u gestandaardiseerde, voor het web geoptimaliseerde SVG-bestanden voor ontwerpprojecten voor websites en schermen.

De beschikbare opties zijn:

  • Stijl. Kies hoe de resulterende code naar het SVG-bestand wordt geschreven. Kies de stijl Interne CSS, Inline stijl of Presentatiekenmerken.
  • Lettertype. Kies hoe lettertypen in het SVG-bestand worden weergegeven. Contouren behouden de pad-definitie en zijn zeer compatibel.
  • Afbeeldingen: Kies of u wilt dat de afbeeldingen worden opgeslagen als ingesloten afbeeldingen in het document of als gekoppelde bestanden die geen deel uitmaken van het document.
  • Object-id's: Kies hoe de id-typen (namen) aan objecten in het SVG-bestand worden toegewezen. Kies voor Laagnamen, Minimaal of Uniek. Met deze optie bepaalt u hoe dubbele namen van objecten worden verwerkt, en hoe namen worden toegewezen aan objecten in het geëxporteerde CSS-bestand.
  • Decimaal: Kies hoeveel informatie u over de precisie van objectlocaties wilt behouden. Een hogere decimaalwaarde vergroot de precisie van de objectplaatsing en daarmee ook de getrouwheid waarmee de SVG wordt weergegeven. Een toename in de decimaalwaarde resulteert echter ook in een toename van de bestandsgrootte van de SVG-export.
  • Verkleinen: Hiermee optimaliseert u de bestandsgrootte van SVG door lege groepen en spaties te verwijderen. Als u deze optie kiest wordt de resulterende SVG-code ook makkelijker te lezen.
  • Responsief. Als u deze optie selecteert, wordt de gegenereerde SVG geschaald in een browser. Er worden geen absolute waarden geschreven voor de grootte.
  • Code tonen: Hiermee opent u de geëxporteerde inhoud in de standaardteksteditor.
  • Tonen in browser (pictogram): Hiermee geeft u de afbeelding weer in uw standaardwebbrowser.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid