Découvrez comment importer des objets graphiques SVG dans Adobe Muse CC. Vous pouvez importer et copier des objets graphiques SVG dans Adobe Muse.

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.

Traitement des fichiers SVG avant importation dans Adobe Muse

Remarque :

la procédure suivante n’est valide que si vous utilisez Adobe Muse 2015.1 ou les versions antérieures.  

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)
    Spécifiez les paramètres SVG dans Adobe Illustrator et avant d’importer un élément SVG dans Adobe Muse CC.
  4. Cliquez sur OK pour enregistrer le fichier.

Importation d’éléments SVG

Si vous utilisez la version 2015.1 d’Adobe Muse ou une version antérieure, 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.

    Panneau des ressources

Une fois le fichier SVG importé, vous pouvez poursuivre la conception de votre site. Recadrez l’image SVG à l’aide de l’outil Recadrage et redimensionnez l’image SVG en fonction de vos besoins de conception.

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 le design 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 en design.

  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.
    Sélection d’un groupe ou d’un tracé
  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.

    Zone de travail de la page web

    Le panneau Ressources indique le fichier SVG collé.

    Panneau des ressources

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.

    Cliquez sur Ajouter des images
  3. Définissez les attributs Ajustement et Position appropriés.

    Définissez les attributs Ajustement et Position appropriés

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.

Ajout d’images SVG à des diaporamas

Avec les versions 2015.1 d’Adobe Muse et les versions ultérieures, il est possible d’ajouter des images SVG à des diaporamas. A partir de la bibliothèque de widgets, commencez par déplacer un widget de vignettes. Sélectionnez ensuite les images vectorielles dans les bibliothèques Creative Cloud et placez-les dans le diaporama.

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