SVG-afbeeldingen gebruiken

Leer hoe u SVG-afbeeldingen plaatst, kopieert of importeert in Adobe Muse.

Opmerking:

Adobe Muse voegt geen nieuwe functies meer toe en stopt op donderdag 26 maart 2020 met de ondersteuning. Zie de veelgestelde vragen over het einde van de levensduur voor Adobe Muse voor meer informatie en assistentie.

In Adobe Muse kunt u vectorafbeeldingen die zijn gemaakt met programma's zoals Adobe Illustrator, in uw site-ontwerp opnemen. Adobe Muse biedt nu ondersteuning voor de SVG-indeling (Scalable Vector Graphics). U kunt de SVG-indeling gebruiken om logo's, pictogrammen, achtergrond- en browservullingen enz. te maken, en deze rechtstreeks op het webpaginacanvas in Adobe Muse te plaatsen.

Afbeeldingen die worden opgeslagen in de SVG-indeling, zijn licht- en resolutieonafhankelijk. Ze kunnen daarom worden geschaald tot elke gewenste afmeting zonder dat dit gevolgen heeft voor de tijd die nodig is om de pagina te laden of voor de weergave van uw site. SVG-bestanden worden ook ondersteund op HiDPI-schermen. 

Aangezien SVG-bestanden resolutieonafhankelijk zijn, worden ze in Adobe Muse op dezelfde manier behandeld voor zowel websites met standaardresolutie als voor sites met hoge resolutie. SVG-bestanden worden niet verkleind tot een grootte die de helft is van de oorspronkelijke grootte wanneer ze worden geplaatst op het webpaginacanvas in de ontwerpweergave.

SVG-instellingen in Adobe Illustrator

Ga als volgt te werk voor SVG-bestanden die zijn gemaakt in Illustrator:

  1. Selecteer in Adobe Illustrator, nadat u de afbeelding hebt ontworpen, Bestand > Opslaan als.

  2. Selecteer SVG in de vervolgkeuzelijst Opslaan als type. Blader naar de locatie waar u het bestand wilt opslaan en klik op Opslaan.

  3. Stel in het dialoogvenster met SVG-opties de volgende kenmerken in:

    • Afbeeldingslocatie: Insluiten
    • SVG-profielen: SVG 1.1
    • Lettertypen - Tekst: Omzetten in omtrek
    • CSS-eigenschappen: Presentatiekenmerken
    • Aantal decimalen: 3
    • Codering: Unicode (UTF-8)

  4. Klik op OK om het bestand op te slaan.

SVG importeren

Zorg ervoor dat u de stappen in SVG-bestanden voorbereiden voor plaatsen in Adobe Muse hebt gevolgd voordat u een SVG-bestand in Adobe Muse importeert en plaatst.

  1. Selecteer Bestand > Plaatsen (Ctrl + D in Windows en Cmd + D op Mac) in Adobe Muse.

  2. Blader naar de locatie van het SVG-bestand, selecteer het bestand en klik op Openen.

  3. In Adobe Muse wordt naast de aanwijzer een miniatuurvoorvertoning van het SVG-bestand weergegeven. Klik op een geschikte locatie op het webpaginacanvas om het SVG-bestand te plaatsen. Het geplaatste bestand wordt vermeld in het deelvenster Middelen.

Na het plaatsen van het SVG-bestand kunt u doorgaan met het ontwerpen van uw website. U kunt de SVG-afbeelding niet uitsnijden met de tool Uitsnijden. U kunt het formaat van de afbeelding echter wel aanpassen en op die manier afstemmen op uw ontwerpbehoeften.

U kunt een geïmporteerd SVG-bestand aan een rasterafbeelding koppelen. U kunt geïmporteerde afbeeldingen ook opnieuw koppelen aan SVG-bestanden.

SVG kopiëren uit Adobe Illustrator

Met Adobe Muse kunt u inhoud kopiëren van Adobe Illustrator naar het canvas voor de webpagina. Dit kan handig zijn als u niet de volledige inhoud van een illustratie in uw site-ontwerp wilt opslaan en gebruiken.

Wanneer u delen van een illustratie kopieert, wordt de selectie in Illustrator omgezet in SVG en op het klembord geplaatst zodat deze in Adobe Muse kan worden gebruikt. In Adobe Muse wordt de gekopieerde inhoud behandeld als ingesloten SVG en u kunt het formaat van de afbeelding aanpassen volgens uw ontwerpwensen.

  1. Voer een van deze bewerkingen uit in Adobe Illustrator:

    • Groep isoleren of Geselecteerd pad: klik met de rechtermuisknop op de groep die of het pad dat u wilt kopiëren en selecteer Groep isoleren/Geselecteerd pad in het contextmenu.
    • Groep of pad handmatig selecteren: selecteer een groep die of pad dat u wilt kopiëren.

  2. Gebruik Ctrl + C (Windows) of Cmd + C (Mac) om de geselecteerde groep of het geselecteerde pad te kopiëren.

  3. Gebruik in Adobe Muse Ctrl + V of Cmd + V om de geselecteerde groep of het geselecteerde pad op het webpaginacanvas te plakken in de ontwerpweergave.

    Het geplakte SVG-bestand wordt vermeld in het deelvenster Middelen.

SVG importeren voor achtergrond- en browservullingen

  1. Afhankelijk van de vraag of u een achtergrondvulling of een browerservulling wilt toevoegen, selecteert u het menu Vulling of Vulling browser. Zie De opties Vulling en Vulling browser gebruiken voor meer informatie.

  2. Klik op Afbeelding toevoegen. Blader naar de locatie van het SVG-bestand, selecteer het bestand en klik op Openen.

  3. Geef de juiste instellingen voor de kenmerken Aanpassen en Positie op.

Opmerking:

Wanneer de SVG-bestanden worden toegevoegd aan de achtergrond- of browservulling, wordt de afbeelding, omgezet in pixels, weergegeven in de ontwerpweergave wanneer het kenmerk Aanpassen is ingesteld op Aanpassen aan pagina of Aanpassen aan vulling. Wanneer echter een voorvertoning van de afbeelding in Adobe Muse of een browser wordt weergegeven, is de weergave zoals verwacht.

Videozelfstudie

Danielle Beaumont

Adobe-logo

Aanmelden bij je account