Brugerhåndbog Annuller

SVG

Lær at arbejde med SVG for at du kan bruge XML og JavaScript til at oprette webgrafik, som reagerer på brugerhandlinger med raffinerede effekter som f.eks. fremhævning, værktøjstip, lyd og animation.

Adobe Illustrator-deeplink

Prøv det i appen
Anvend SVG-filtre med nogle få enkle trin.

Om SVG

SVG er et vektorformat, der beskriver billeder som former, kurver, tekst og filtereffekter. De filer, der oprettes, er kompakte og giver grafik af høj kvalitet på internettet, på tryk og tilmed på håndholdte enheder med begrænsede ressourcer, i modsætning til GIF, JPEG, WBMP og PNG, som er store. Brugerne kan forstørre et SVG-billede på skærmen, uden at det går ud over skarphed eller detaljer. Derudover giver SVG god understøttelse af tekst og farver, så brugerne ser billederne, som de vises på tegnebrættet i Illustrator.

SVG-formatet er fuldstændigt XML-baseret og giver både udviklere og brugere mange fordele. 

Du kan gemme illustrationer i SVG-format med kommandoerne Gem, Gem som, Gem en kopi eller Gem til web og enheder. Hvis du vil have adgang til det samlede sæt af SVG-eksportindstillinger, skal du bruge kommandoen Gem, Gem som eller Gem en kopi. Kommandoen Gem til web og enheder indeholder en delmængde af SVG-eksportindstillinger, som kan bruges til webrelateret arbejde.

Anvend SVG-effekter

Du kan bruge SVG-effekter (filtre) til at tilføje grafikegenskaber, såsom skyggeeffekter, i illustrationen. SVG-effekter adskiller sig fra de tilsvarende bitmapeffekter ved at være XML-baserede og opløsningsuafhængige. En SVG-effekt er i realiteten ikke andet end en række XML-egenskaber, der beskriver forskellige matematiske funktioner. Den endelige effekt gengives i målobjektet i stedet for kildegrafikken.

Illustrator indeholder et standardsæt SVG-effekter. Du kan anvende en standardeffekt direkte eller redigere dens XML-kode for at tilpasse den. Du kan også oprette nye SVG-effekter.

Bemærk:

For at ændre Illustrators standard SVG-filtre skal du redigere Adobe SVG Filters.svg-filen på følgende placering ved hjælp af en teksteditor:

  • macOS: ~/Library/Application Support/Adobe/Adobe Illustrator <version>/<locale>
  • Windows: C:\Brugere\<brugernavn>\AppData\Roaming\Adobe\Adobe Illustrator <version> Settings\<sprog>\x64

Du kan ændre eksisterende filterdefinitioner, slette dem og tilføje nye.

Anvend en standardeffekt

  1. Markér et objekt eller en gruppe (eller et lag i panelet Lag).

  2. Gå til Effekt > SVG-filtre > Anvend SVG-filtre.

Anvend en tilpasset effekt

  1. Markér et objekt eller en gruppe (eller et lag i panelet Lag).

  2. Gå til Effekt > SVG-filtre > Anvend SVG-filter.

  3. Vælg en effekt i dialogboksen, og vælg derefter Rediger SVG-filter   . Rediger standardkoden, og vælg OK.

Opret og anvend en ny effekt

  1. Markér et objekt eller en gruppe (eller et lag i panelet Lag).

  2. Gå til Effekt > SVG-filtre > Anvend SVG-filter.

  3. I dialogboksen skal du vælge Nyt SVG-filter   . Angiv den nye kode, og vælg OK.

Når du anvender en SVG-filtereffekt, viser Illustrator en rasteriseret version af effekten på tegnebrættet. Du kan styre dette eksempelbilledes opløsning ved at ændre dokumentets indstilling for rasteriseringsopløsning.

Bemærk:

En SVG-effekt skal være den sidste effekt, når et objekt bruger flere effekter. Det skal med andre ord stå i bunden af panelet Udseende (lige over Gennemsigtighed indekseringen). Hvis der følger andre effekter efter en SVG-effekt, består SVG-outputtet af et rasterobjekt.

Importere effekter fra en SVG-fil

  1. Vælg Effekt > SVG-filter > Importer SVG-filter.

  2. Markér den SVG-fil, du vil importere effekter fra, og vælg Åbn.

Oversigt over panelet SVG-interaktivitet

Med panelet SVG-interaktivitet kan du se alle hændelser og JavaScript-filer, der er knyttet til den aktuelle fil.
Du kan bruge panelet SVG-interaktivitet (Vindue > SVG-interaktivitet) til at føje interaktivitet til illustrationen, når den eksporteres til visning i en webbrowser. Hvis du for eksempel opretter en hændelse, som aktiverer en JavaScript-kommando, kan du hurtigt oprette bevægelse på en webside, når brugeren udfører en handling som for eksempel at bevæge en musemarkør hen over et objekt.

Slet en hændelse fra panelet SVG-interaktivitet

Du kan bruge panelet SVG-interaktivitet til at slette en eller alle hændelser.

Sådan sletter du en hændelse

  • Vælg hændelsen, og vælg Fjern valgt element  .

Sådan sletter du alle hændelser

  • Vælg Ryd hændelser i panelmenuen  

Vis, tilføj eller slet hændelser kædet sammen med en fil

Vælg Opret kæde til JavaScript-filer,   og vælg Tilføj for at tilføje flere JavaScript-filer. Hvis du derimod vil fjerne det valgte JavaScript-element, skal du vælge Fjern.

Tilføj SVG-interaktivitet i illustrationer

  1. Vælg en hændelse i panelet SVG-interaktivitet. (Se SVG-hændelser).

  2. Angiv det tilsvarende JavaScript, og tryk på Enter.

SVG-hændelser

onfocusin

Aktiverer handlingen, når elementet aktiveres, f.eks. ved markering med markøren.

onfocusout

Aktiverer handlingen, når elementet gøres inaktivt (ofte når et andet element aktiveres).

onactivate

Aktiverer handlingen med et museklik eller tastetryk, afhængigt af SVG-elementet.

onmousedown

Aktiverer handlingen, når museknappen trykkes ned, mens markøren er placeret på et element.

onmouseup

Aktiverer handlingen, når museknappen slippes, mens markøren er placeret på et element.

onclick

Aktiverer handlingen, når der klikkes med museknappen, mens markøren er placeret på et element.

onmouseover

Aktiverer handlingen, når markøren placeres på et element.

onmousemove

Aktiverer handlingen, mens markøren er placeret på et element.

onmouseout

Aktiverer handlingen, når markøren flyttes væk fra et element.

onkeydown

Aktiverer handlingen, når en tast trykkes ned.

onkeypress

Aktiverer handlingen, mens en tast er trykket ned.

onkeyup

Aktiverer handlingen, når en tast slippes.

onload

Aktiverer handlingen, når SVG-dokumentet er blevet analyseret fuldstændigt af browseren. Brug denne hændelse til at kalde initialiseringsfunktioner, der kun skal udføres én gang.

onerror

Aktiverer handlingen, når et element ikke indlæses korrekt, eller der opstår en anden fejl.

onabort

Aktiverer handlingen, når indlæsningen af siden standses, før elementet er fuldstændigt indlæst.

onunload

Aktiverer handlingen, når SVG-dokumentet fjernes fra et vindue eller en ramme.

onzoom

Aktiverer handlingen, når zoomniveauet ændres for dokumentet.

onresize

Aktiverer handlingen, når størrelsen på dokumentet ændres.

onscroll

Aktiverer handlingen, når dokumentvisningen rulles eller panoreres.

Tip til oprettelse af SVG-filer

  • Brug lag til at føje struktur til en SVG-fil. Hvert lag konverteres til et gruppeelement (<g>), når du gemmer illustrationer i SVG-format. (For eksempel bliver et lag ved navn Knap1 til <g id="Button1_ver3.0"> i SVG-filen.) Indlejrede lag bliver SVG-indlejrede grupper, og skjulte lag bevares med SVG-stilegenskaben display="none".

  • Hvis objekter i forskellige lag skal være gennemsigtige, skal du justere hvert objekts opacitet i stedet for hvert lags.

  • Rasterdata kan ikke skaleres i SVG Viewer og kan ikke redigeres som andre SVG-elementer. Du kan blot undgå at oprette illustrationer, som skal rasteriseres i SVG-filen. Brug SVG-effekter til at tilføje grafikeffekter uden rasterisering.

  • Brug symboler, og gør kurverne i illustrationen enklere for at forbedre SVG-ydeevne. Hvis du prioriterer ydelse, bør du desuden undgå at bruge pensler, som producerer mange kurvedata, for eksempel Trækul, Aske og Rullepen.

  • Brug udsnit, grafikobjekter og scripts til at tilføje webhyperlinks i en SVG-fil.

  • Et scriptsprog, f.eks. JavaScript, åbner op for ubegrænset funktionalitet i en SVG-fil. Markør- og tastaturbevægelser kan aktivere scriptfunktioner som for eksempel overgangseffekter.

Indstillinger for eksport af weboptimeret SVG

En ny indstilling til SVG-eksport (Filer > Eksportér > Eksportér som > SVG) er tilgængelig. Det nye arbejdsforløb tillader, at du genererer standardiserede, weboptimerede SVG-filer til dine web- og skærmdesignprojekter. Du kan finde flere oplysninger under Indstillinger for SVG-eksport.

Mere som dette

Har du et spørgsmål eller en idé?

Spørg i fællesskabet

Hvis du har et spørgsmål eller en god idé, så kom og deltag i Adobe Illustrator Community. Vi vil meget gerne høre fra dig og se dine kreationer.

Få hjælp hurtigere og nemmere

Ny bruger?