Om SVG

Formater til bitmapbilleder til internettet – GIF, JPEG, WBMP og PNG – beskriver billeder ved hjælp af et pixelgitter. De oprettede filer har en tendens til at være store, begrænset til en enkelt (ofte lav) opløsning og bruger store mængder båndbredde på internettet. SVG er på den anden side 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. Brugerne kan forstørre et SVG-billede på skærmen, uden at det går ud over skarphed og detaljer. Derudover giver SVG bedre 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. Med SVG kan du 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.

Du kan gemme illustrationer iSVG-formatmed kommandoen 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 et undersæt af SVG-eksportindstillinger, som kan bruges til webrelateret arbejde.

Den endelige SVG-fil påvirkes af opsætningen af illustrationen i Illustrator. Vær opmærksom på følgende retningslinjer:

  • Brug lag til at føje struktur til en SVG-fil. Når du gemmer illustrationer i SVG-format, konverteres hvert lag til et gruppeelement (<g>). (Et lag med navnet Knap1 bliver f.eks. til <g id="Knap1_ver3.0"> i SVG-filen). Indlejrede lag bliver til SVG-indlejrede lag, og skjulte lag bevares med SVG-formateringsindstillingen display="none".

  • Hvis objekter i forskellige lag skal være gennemsigtige, skal du justere hvert objekts opacitet i stedet for hvert lags. Hvis du ændrer opaciteten på lagniveauet, viser den oprettede SVG-fil ikke gennemsigtighed, som den vises i Illustrator.

  • Rasterdata kan ikke skaleres i SVG Viewer og kan ikke redigeres som andre SVG-elementer. Undgå om muligt at oprette illustrationer, som skal rasteriseres i SVG-filen. Forløbsmasker og objekter, som bruger effekterne Rasteriser, Kunstnerisk, Sløring, Penselstrøg, Forvrængning, Opbrydning, Gør skarpere, Skitse, Effekter, Tekstur og Skærm, rasteriseres, når de gemmes i SVG-format. På lignende måde rasteriseres også grafikformater, der indeholder disse effekter. Brug SVG-effekter til at tilføje grafikeffekter uden rasterisering.

  • Brug symboler, og gør kurverne i illustrationen enklere for at forbedre SVG-ydeevne. Undgå også at bruge pensler, som producerer mange kurvedata, f.eks. Kul, Aske og Rullepen, hvis ydeevne har en høj prioritet.

  • 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 f.eks. overgangseffekter. Scripts kan også bruge dokumentobjektmodellen (DOM) til at få adgang til og ændre SVG-filen – f.eks. indsætte eller slette SVG-elementer.

Anvende SVG-effekter

Du kan bruge SVG-effekter til at tilføje grafikegenskaber, f.eks. skyggeeffekter, i illustrationen. SVG-effekter adskiller sig fra de tilsvarende bitmapeffekter ved at være XML-baserede og opløsningsuafhængige. Et SVG-filter 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 bruge effekterne med standardegenskaberne, redigere XML-koden for at oprette brugerdefinerede effekter eller skrive nye SVG-filtre.

Bemærk:

Hvis du vil foretage ændringer i Illustrators SVG-standardfiltre, skal du redigere Adobe SVG-filtrene i en teksteditor.svg-filen i mappen Documents and Settings\<brugermappe>\Application Data\Adobe\Indstillinger for Adobe Illustrator <versionsnummer>\<placering>. Du kan ændre eksisterende filterdefinitioner, slette filterdefinitioner og tilføje nye filterdefinitioner.

  1. Marker et objekt eller en gruppe (eller marker et lag i panelet Lag).
  2. Benyt en af følgende fremgangsmåder:
    • Hvis du vil anvende en effekt med dens standardindstillinger, skal du vælge effekten i nederste afsnit af undermenuen Effekt > SVG-filtre.

    • Hvis du vil anvende en effekt med brugerdefinerede indstillinger, skal du vælge Effekt > SVG-filtre > Anvend SVG-filter. Vælg effekten i dialogboksen, og klik påknappenRediger SVG-filter.Rediger standardkoden, og klik på OK.

    • Hvis du vil oprette og anvende en ny effekt, skal du vælge Effekt > SVG-filtre > Anvend SVG-filter. Klik på knappen Nyt SVG-filteri dialogboksen,angiv den nye kode, og klik på 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 anvender flere effekter. Den skal med andre ord vises nederst i panelet Udseende (lige over elementet Gennemsigtighed). 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. Marker den SVG-fil, du vil importere effekter fra, og klik på Åbn.

Oversigt over panelet SVG-interaktivitet

Du bruger panelet SVG-interaktivitet (Vindue > SVG-interaktivitet) til at føje interaktivitet til illustrationen, når den eksporteres til visning i en webbrowser. Hvis du f.eks. 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 f.eks. at bevæge en musemarkør hen over et objekt. Med panelet SVG-interaktivitet kan du også se alle hændelser og JavaScript-filer, der er knyttet til den aktuelle fil.

Slette en hændelse fra panelet SVG-interaktivitet

  • Hvis du vil slette en hændelse, skal du markere den og klikke på knappen Slet eller vælge Slet hændelse i panelmenuen.
  • Hvis du vil slette alle hændelser, skal du vælge Ryd hændelser i panelmenuen.

Vise, tilføje eller slette hændelser kædet sammen med en fil

  1. Klik på knappen Opret kæde til JavaScript-filer .
  2. Marker et JavaScript-element i dialogboksen JavaScript-filer, og benyt en af følgende fremgangsmåder:
    • Klik på Tilføj for at søge efter yderligere JavaScript-filer.

    • Klik på Fjern for at fjerne det markerede JavaScript-element.

Tilføje 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.

Indstillinger til eksport af weboptimeret SVG

Der er adgang til en ny indstilling for SVG-eksport (Filer > Eksporter > SVG). Det nye arbejdsforløb tillader, at du genererer standardiserede, weboptimerede SVG-filer til dine web- og skærmdesignprojekter.

De tilgængelige indstillinger er:

  • Formatering. Vælg, hvordan den endelige kode skal skrives i SVG-filen. Vælg mellem formaterne Intern CSS, Indlejret formatering eller Præsentationsattributter.
  • Skrifttype. Vælg, hvordan skrifttyper angives i SVG-filen. Konturer bevarer kurvedefinitionen,og er mest kompatible.
  • Billeder: Vælg, om du vil have, at billeder gemmes som integreret i dokumentet eller som linkede filer eksternt for dokumentet.
  • Objekt-id'er: Vælg, hvordan id-typer (navne) tildeles til objekter i SVG-filen. Vælg mellem Lagnavne, Minimal eller Entydig. Denne indstilling bestemmer, hvordan dublerede navne på objekter håndteres, og hvordan objekter navngives i den eksporterede CSS.
  • Decimal: Vælg, hvor mange oplysninger du vil bevare til præcisionen af objektplaceringer. En højere værdi for Decimal øger præcisionen af, hvordan objekter præsenteres, og dette øger den visuelle gengivelse af SVG-filen. Når værdien af Decimal øges, øges filstørrelsen på den resulterende, eksporterede SVG-fil dog også.
  • Minify: Optimerer filstørrelsen på SVG-filen ved at fjerne tomme grupper og pladser. Hvis du vælger denne indstilling, reduceres læsbarheden af den resulterende SVG-kode også.
  • Dynamisk. Hvis du markerer denne indstilling, skaleres den genererede SVG i browseren. Der skrives ingen absolutte størrelsesværdier.
  • Vis kode: Åbner det eksporterede indhold i dit normale tekstredigeringsprogram.
  • Vis ibrowser (ikon): Viser billedet i din standardwebbrowser.

Dette arbejde har licens under en Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Opslag på Twitter™ og Facebook er ikke omfattet af vilkårene for Creative Commons.

Juridiske meddelelser   |   Politik for beskyttelse af personlige oplysninger online