Découvrez comment placer, copier ou importer dans Adobe Muse des éléments SVG.

Remarque :

Aucune nouvelle fonctionnalité n’est plus ajoutée à Adobe Muse et le support prendra fin le 26 mars 2020. Pour plus d’informations et pour obtenir de l’aide, reportez-vous à la page de fin de service Adobe Muse.

Adobe Muse permet d’utiliser des graphiques vectoriels, créés à l’aide d’outils tels qu’Adobe Illustrator, dans la conception de votre site. Actuellement, Adobe Muse prend en charge le format SVG (Scalable Vector Graphics). Vous pouvez utiliser le format SVG pour créer des logos, des icônes, des images d’arrière-plan et des fonds de navigateur, etc. Vous pouvez les positionner directement sur la zone de travail de la page web dans Adobe Muse.

Les graphiques enregistrés au format SVG sont clairs et indépendants de la résolution. Par conséquent, ces graphiques peuvent être redimensionnés en n’importe quelle taille sans affecter la période de chargement des pages ni l’aspect de votre site. Les fichiers SVG sont également pris en charge par les écrans HiDPI. 

Du fait de leur indépendance par rapport à la résolution, Adobe Muse traite les fichiers SVG de la même façon dans les sites web standard et haute résolution. Les fichiers SVG ne sont pas réduits à 50 % de leur taille lorsqu’ils sont placés sur la zone de travail de la page web en mode Conception.

Paramètres SVG dans Adobe Illustrator

Pour les fichiers SVG créés dans Adobe Illustrator, procédez comme suit :

  1. Dans Adobe Illustrator, une fois que vous avez conçu le graphique, sélectionnez Fichier > Enregistrer sous.

  2. Sélectionnez SVG dans la liste déroulante Type de fichier. Accédez à l’emplacement où vous souhaitez enregistrer le fichier, puis cliquez sur Enregistrer.

  3. Dans la boîte de dialogue des options SVG, définissez les attributs suivants :

    • Emplacement de l’image : incorporer
    • Profil SVG : SVG 1.1
    • Polices - Type : convertir en tracé
    • Propriétés CSS : attributs de présentation
    • Positions décimales : 3
    • Codage : Unicode (UTF-8)
    SVGOptions
  4. Cliquez sur OK pour enregistrer le fichier.

Importation d’éléments SVG

Avant d’importer un fichier SVG dans Adobe Muse, vérifiez que vous avez suivi les étapes décrites dans Préparation des fichiers SVG pour l’importation dans Adobe Muse.

  1. Dans Adobe Muse, sélectionnez Fichier > Importer (Ctrl + D sous Windows et Cmd + D sous MAC).

  2. Accédez à l’emplacement du fichier SVG, sélectionnez-le, puis cliquez sur Ouvrir.

  3. Dans Adobe Muse, un aperçu de vignette du fichier SVG se déplace avec le pointeur. Cliquez sur un emplacement approprié dans la zone de travail de la page web pour importer le fichier SVG. Le panneau Ressources répertorie les fichiers que vous avez importés.

    Splash

Une fois le fichier SVG importé, vous pouvez poursuivre la conception de votre site. Vous ne pouvez pas recadrer l’image SVG à l’aide de l’outil Recadrage. Cependant, vous pouvez la redimensionner en fonction de vos besoins.

Vous pouvez lier un fichier SVG importé à une image pixellisée. Vous pouvez également rétablir le lien entre les images importées et les fichiers SVG.

Copie de fichiers SVG depuis Adobe Illustrator

Adobe Muse permet de copier le contenu d’Adobe Illustrator sur la zone de travail de la page web. La copie de contenu est utile lorsque vous ne souhaitez pas enregistrer et utiliser le contenu entier d’une illustration dans la conception de votre site.

Lorsque vous copiez des parties d’une illustration, Illustrator convertit la sélection au format SVG et la place dans le Presse-papiers pour l’utiliser dans Adobe Muse. Adobe Muse traite le contenu copié comme SVG incorporé, et vous pouvez redimensionner le graphique en fonction de vos besoins de conception.

  1. Dans Adobe Illustrator, utilisez l’une des méthodes suivantes :

    • Isoler le groupe ou le tracé sélectionné : cliquez avec le bouton droit de la souris sur le groupe ou tracé à copier et sélectionnez le groupe isolé/tracé sélectionné dans le menu contextuel.
    • Sélectionner manuellement le groupe ou le tracé : sélectionnez un groupe ou un tracé à copier.
    IsolatedGroup-1
  2. Utilisez les commandes Ctrl + C (Windows) ou Cmd + C (MAC) pour copier le groupe ou le tracé sélectionné.

  3. Dans Adobe Muse, utilisez les commandes Ctrl + V ou Cmd + V pour coller le groupe ou le tracé sélectionné sur la zone de travail de la page web en mode Conception.

    PasteIsolatedGroup

    Le panneau Ressources indique le fichier SVG collé.

    AssetsPanelWithPastedSVG

Importation d’éléments SVG pour les images d’arrière-plan et les fonds de navigateur

  1. Selon l’endroit où vous souhaitez ajouter le remplissage d’arrière-plan ou le fond du navigateur, sélectionnez respectivement Fond ou Fond du navigateur. Pour plus d’informations, voir Utilisation des options Fond et Fond du navigateur.

  2. Cliquez sur Ajouter des images. Accédez à l’emplacement du fichier SVG, sélectionnez-le, puis cliquez sur Ouvrir.

    BrowserFill
  3. Définissez les attributs Ajustement et Position appropriés.

    BrowserFillWithFittingAndPosition

Remarque :

lorsque des fichiers SVG sont ajoutés au remplissage d’arrière-plan ou au fond de navigateur, l’image est pixellisée en mode Conception lorsque l’attribut Ajustement est défini sur Ajuster ou Ajuster au fond. Toutefois, lorsqu’elle est affichée dans Adobe Muse ou dans un navigateur, l’image est rendue comme prévu.

Tutoriel vidéo

Tutoriel vidéo
Danielle Beaumont

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne