Användarhandbok Avbryt

SVG

Lär dig arbeta med SVG för att skapa webbgrafik med XML och JavaScript som svarar på användaråtgärder med avancerade effekter, t.ex. markeringar, knappbeskrivningar, ljud och animeringar.

Djuplänk till Adobe Illustrator

Testa det i appen
Använda SVG-filer i några enkla steg.

Om SVG

SVG är ett vektorformat som beskriver bilder som former, banor, text och filtereffekter. De färdiga filerna är komprimerade och ger högkvalitativ grafik på webben, i tryck och till och med på resursbegränsade, handhållna enheter, till skillnad från GIF, JPEG, WBMP och PNG, som är stora. Användaren kan göra en SVG-bild på skärmen större utan att skärpa, detaljer eller klarhet förloras. Dessutom har SVG gott stöd för text och färger vilket garanterar att användarna ser bilderna som de visas på Illustrator-ritytan.

SVG-formatet är helt XML-baserat och är fördelaktigt för utvecklare och användare. 

Du kan spara teckningar i SVG-format genom att använda kommandona Spara, Spara som, Spara kopia och Spara för webben och enheter. Använd kommandona Spara, Spara som och Spara kopia om du vill få tillgång till alla SVG-exportalternativ. Med kommandot Spara för webben och enheter får du tillgång till vissa SVG-exportalternativ som kan användas för webborienterat arbete.

Använda SVG-effekter

Du kan använda SVG-effekter U(filer) om du vill lägga till grafiska egenskaper som skuggor i teckningar. SVG-effekter skiljer sig från motsvarande bitmappseffekter eftersom de är XML-baserade och oberoende av upplösning. En SVG-effekt är egentligen inget annat än en serie XML-egenskaper som beskriver olika matematiska operationer. Resultateffekten återges i målobjektet i stället för i källgrafiken.

I Illustrator finns en standarduppsättning med SVG-effekter. Du kan tillämpa en standardeffekt direkt eller anpassa den genom att redigera dess XML-kod. Du kan även skapa nya SVG-effekter.

Obs!

Redigera Adobe SVG-filen Filters.svg på följande plats med hjälp av en texteditor om du vill ändra Illustrators SVG-standardfilter:

  • macOS: ~/Library/Application Support/Adobe/Adobe Illustrator <version>/<språk>
  • Windows: C:\Users\<användarnamn>\AppData\Roaming\Adobe\Adobe Illustrator <version> Settings\<språk>\x64

Du kan ändra befintliga filterdefinitioner, radera dem och lägga till nya.

Använd en standardeffekt

  1. Markera ett objekt eller en grupp (eller ett lager på panelen Lager).

  2. Gå till Effekt > SVG-filter > Tillämpa SVG-filter.

Använd en anpassad effekt

  1. Markera ett objekt eller en grupp (eller ett lager på panelen Lager).

  2. Gå till Effekt > SVG-filter > Tillämpa SVG-filter.

  3. Markera en effekt i dialogrutan och välj sedan Redigera SVG-filter  . Redigera standardkoden och välj OK.

Skapa och tillämpa en ny effekt

  1. Markera ett objekt eller en grupp (eller ett lager på panelen Lager).

  2. Gå till Effekt > SVG-filter > Tillämpa SVG-filter.

  3. Välj Nytt SVG-filter   i dialogrutan. Ange den nya koden och välj OK.

När du tillämpar en SVG-filtereffekt visas en rastrerad version av effekten på ritytan. Du kan styra upplösningen i den här förhandsvisningsbilden genom att ändra dokumentets inställning för rasterupplösning.

Obs!

En SVG-effekt måste vara den sista effekten när ett objekt använder flera effekter. Den måste med andra ord finnas längst ner på panelen Utseende (strax ovanför Genomskinlighet). Om andra effekter används efter en SVG-effekt skapas ett rasterobjekt.

Importera effekter från en SVG-fil

  1. Välj Effekt > SVG-filter > Importera SVG-filter.

  2. Markera den SVG-fil som du vill importera effekter från och välj Öppna.

Panelen SVG-interaktivitet – översikt

Med panelen SVG-interaktivitet kan du visa alla händelser och JavaScript-filer som hör till den aktuella filen.
Du använder panelen SVG-interaktivitet (Fönster > SVG-interaktivitet) om du vill lägga till interaktivitet i teckningar som ska exporteras till en webbläsare för visning. Genom att skapa en händelse som startar ett JavaScript-kommando kan du snabbt skapa rörelse på en webbsida när användaren utför en åtgärd, t.ex. flyttar pekaren över ett objekt.

Ta bort en händelse från panelen SVG-interaktivitet

Du kan använda panelen SVG-interaktivitet för att radera en eller alla händelser.

Radera en händelse

  • Markera händelsen och välj Ta bort markerad uppgift  .

Radera alla händelser

  • Välj Radera alla händelser på panelmenyn  

Visa, lägga till och ta bort händelser som är länkade till en fil

Välj Länka JavaScript-filer   och välj Lägg till för att lägga till ytterligare JavaScript-filer. Om du vill ta bort den valda JavaScript-posten ska du välja Ta bort.

Lägga till SVG-interaktivitet i teckningar

  1. Markera en händelse på panelen SVG-interaktivitet. (Se SVG-händelser.)

  2. Ange motsvarande JavaScript och tryck på Enter.

SVG-händelser

onfocusin

Startar åtgärden när elementet fokuseras, t.ex. när det markeras med pekaren.

onfocusout

Startar åtgärden när elementet inte längre fokuseras, t.ex. när ett annat element fokuseras i stället).

onactivate

Startar åtgärden med ett musklick eller en tangenttryckning, beroende på SVG-elementet.

onmousedown

Startar åtgärden när musknappen trycks ned över ett element.

onmouseup

Startar åtgärden när musknappen släpps upp över ett element.

onclick

Startar åtgärden när användaren klickar på ett element med musen.

onmouseover

Startar åtgärden när pekaren flyttas till ett element.

onmousemove

Startar åtgärden när pekaren är över ett element.

onmouseout

Startar åtgärden när pekaren flyttas bort från ett element.

onkeydown

Startar åtgärden när en tangent trycks ned.

onkeypress

Startar åtgärden medan en tangent trycks ned.

onkeyup

Startar åtgärden när en tangent släpps upp.

onload

Startar åtgärden efter att SVG-dokumentet har tolkats av webbläsaren. Använd den här händelsen om du vill anropa engångsfunktioner för initiering.

onerror

Startar åtgärden när ett element inte läses in på rätt sätt eller om andra fel uppstår.

onabort

Startar åtgärden när sidinläsningen avbryts innan elementet hämtats.

onunload

Startar åtgärden när SVG-dokumentet tas bort från ett fönster eller en bildruta.

onzoom

Startar åtgärden när zoomnivån ändras i dokumentet.

onresize

Startar åtgärden när storleken på dokumentvyn ändras.

onscroll

Startar åtgärden när dokumentvyn rullas eller panoreras.

Tips om att skapa SVG-filer

  • Använd lager om du vill lägga till struktur i en SVG-fil. Varje lager görs om till ett gruppelement (<g>) när du sparar verket i SVG-format. (Ett lager som heter Button1 blir <g id="Button1_ver3.0"> i SVG-filen.) Kapslade lager blir SVG-kapslade grupper och dolda lager bevaras med SVG-stilegenskapen display="none".

  • Om du vill att objekt i olika lager ska vara genomskinliga justerar du opaciteten för varje objekt, inte för varje lager.

  • Rasterinformation kan inte skalas i SVG Viewer och inte redigeras som andra SVG-element. Du kan helt enkelt undvika att skapa teckningar som rastreras i SVG-filen. Använd SVG-effekter om du vill lägga till grafiska effekter utan att orsaka rastrering.

  • Använd symboler och förenkla banorna i teckningen för förbättrade SVG-prestanda. Om du prioriterar prestanda bör du dessutom undvika att använda penslar som ger mycket baninformation, t.ex. Träkol, Aska och Bläddringspenna.

  • Använd segment, bildscheman och skript om du vill lägga till webblänkar i en SVG-fil.

  • Skriptspråk, t.ex. JavaScript, möjliggör obegränsade funktioner i en SVG-fil. Rörelser med pekare och tangenttryckningar kan starta skriptfunktioner som rollover-effekter.

Exportalternativ för webboptimerad SVG

Ett nytt alternativ för SVG-export (Arkiv > Exportera > Exportera som > SVG) är tillgängligt. Med det nya arbetsflödet kan du skapa standardiserade webboptimerade SVG-filer för webb- och skärmdesignprojekt. Mer information finns i Exportalternativ för SVG.

Liknande innehåll

Har du en fråga eller en idé?

Fråga i användarforumet

Om du har frågor eller förslag får du gärna vara med i Adobe Illustrator-communityn. Vi vill gärna att du hör av dig och se dina alster.

Få hjälp snabbare och enklare

Ny användare?