Använda SVG-bilder

Läs om hur du monterar, kopierar och importerar SVG-bilder i Adobe Muse.

Obs!

Inga nya funktioner läggs till i Adobe Muse och supporten för Adobe Muse kommer att upphöra den 26 mars 2020. Mer information finns i de vanliga frågorna om när Adobe Muse inte längre kommer att vara tillgängligt.

Med Adobe Muse kan du använda vektorgrafik som skapats med verktyg som Adobe Illustrator i din webbdesign. Nu har Adobe Muse inbyggt stöd för formatet Scalable Vector Graphics (SVG). Du kan använda SVG-formatet till att skapa logotyper, ikoner, bakgrundsfyllningar, webbläsarfyllningar och annat och montera det direkt på webbsidearbetsytan i Adobe Muse.

Grafik som sparas i SVG-formatet är lätt och inte upplösningsberoende. Därför kan sådan grafik skalas till vilken storlek som helst utan att påverka sidans laddningstid eller utseende. SVG-filer stöds även på HiDPI-skärmar. 

Eftersom de är oberoende av upplösning så behandlar Adobe Muse SVG-filer på samma sätt i både standardwebbplatser och högupplösta webbplatser. SVG-filer skalas inte ned till 50 % av sin storlek när de placeras på en webbsidas arbetsyta i designvyn.

SVG-inställningar i Adobe Illustrator

Gör så här för SVG-filer som skapats med Adobe Illustrator:

  1. Efter att du skapat grafiken väljer du i Adobe Illustrator Arkiv > Spara som.

  2. Välj SVG i listrutan Filformat. Bläddra efter den plats där du vill spara filen och klicka på Spara.

  3. Markera följande alternativ i dialogrutan SVG-alternativ:

    • Bildplacering: Bädda in
    • SVG-profil: SVG 1.1
    • Teckensnitt Typ: Konvertera till textkonturer
    • CSS-egenskaper: Presentationsattribut
    • Decimaler: 3
    • Kodning: Unicode (UTF-8)

  4. Klicka på OK för att spara filen.

Importera SVG

Innan du importerar och monterar en SVG-fil i Adobe Muse måste du följa stegen i Förbereda SVG-filer för montering i Adobe Muse.

  1. I Adobe Muse väljer du Arkiv > Montera (Ctrl+D i Windows och Kommando+D i OS X).

  2. Bläddra efter SVG-filen, markera den och klicka på Öppna.

  3. I Adobe Muse visas en förhandsvisning i miniatyr av SVG-filen vid pekaren. Klicka på en lämplig plats på webbsidearbetsytan för att montera SVG-filen. Panelen Resurser visar den fil du monterat.

När SVG-filen monterats kan du fortsätta formge din webbplats. Du kan inte beskära SVG-bilden med beskärningsverktyget. Däremot kan du ändra dess storlek så att den passar dina designbehov.

Du kan länka en importerad SVG-fil till en rasterbild. Du kan även länka om importerade bilder till SVG-filer.

Kopiera SVG från Adobe Illustrator

Med hjälp Adobe Muse kan du kopiera innehåll från Adobe Illustrator till webbsidearbetsytan. Det är användbart att kunna kopiera innehåll när du inte vill spara och använda allt bildinnehåll i din webbdesign.

Där du kopierar delar av en bild så konverterar Illustrator urvalet till SVG och placerar det i Urklipp så att Adobe Muse kan använda det. Det kopierade innehållet behandlas som inbäddad SVG och du kan ändra storlek på bilden, om det behövs.

  1. Gör något av följande i Adobe Illustrator:

    • Isolera grupp eller markerad bana: Högerklicka på den grupp eller bana du vill kopiera och välj Isolera grupp/Markerad bana på snabbmenyn.
    • Markera grupp eller banan manuellt: Markera en grupp eller bana du vill kopiera.

  2. Använd Ctrl+C (Windows) eller Kommando+C (OS X) för att kopiera den markerade gruppen eller banan.

  3. I Adobe Muse använder du Ctrl+V eller Kommando+V till att klistra in den markerade gruppen eller banan på webbsidearbetsytan i designvyn.

    Den inklistrade SVG-filen visas i panelen Resurser.

Importera SVG-filer som bakgrunds- och webbläsarfyllning

  1. Välj Fyllning eller Webbläsarfyllning, beroende på vad du vill lägga till. Mer information finns i Använda alternativen Fyllning och Webbläsarfyllning.

  2. Klicka på Lägg till bild. Bläddra efter SVG-filen, markera den och klicka på Öppna.

  3. Ställ in passning och position som du vill ha det.

Obs!

När SVG-filer läggs till i en bakgrund eller webbläsarfyllning så visas bilden rastrerad i designvyn när passningen är satt till Anpassa till sida eller Anpassa till fyllning. Men när bilden förhandsvisas i Adobe Muse eller i en webbläsare så renderas bilden som väntat.

Videosjälvstudie

Danielle Beaumont

Adobes logotyp

Logga in på ditt konto