Ubuntu-fr

abecidofugy

Exporter un SVG en HTML5 (sous Inkscape)

Salut,

Je cherche depuis 30 minutes ou plus comment exporter un SVG en HTML5 sous Inkcape (pour l’inclure dans une page web et avoir comme ça du responsive sur le fond).

Merci de votre aide, je continue à chercher.

//EDIT : y’a bien « Canvas html 5 » mais ce n’est pas ça.

Dernière modification par abecidofugy (Le 30/05/2022, à 20:24)

krodelabestiole

Re : Exporter un SVG en HTML5 (sous Inkscape)

le svg c'est du xml, comme le html.

il y a pas mal de méthodes pour inclure une image svg sur une page web... je suis pas sûr que ta question soit liée à inkscape, c'est peut-être plutôt une question de html / css ? https://developer.mozilla.org/fr/docs/L … to_the_Web

---

nouveau forum ubuntu-fr on en parle là : refonte du site / nouveau design
profil - sujets récurrents - sources du site

abecidofugy

Re : Exporter un SVG en HTML5 (sous Inkscape)

Salut tim'

Tu vas bien ?

Finalement j’ai trouvé que sous Illustrator on peut avoir le code du SVG lors de l’enregistrement dans ce format (un bouton en bas).

En fait, c’est pour des témoignages. Donc je voulais un format texte, accessible. J’ai trouvé ça par contre : https://www.la-revanche-des-sites.fr/bl … r-le-seo-2
Tout en bas : ne pas référencer le svg. C’est super pour ce qui m’intéresse.

Bonne soirée et à bientôt.

MicP

Re : Exporter un SVG en HTML5 (sous Inkscape)

Bonjour

Je n'ai pas bien compris ce que tu veux faire car depuis un navigateur web,
j'ouvre et affiche sans aucun problème tous les fichiers svg que j'ai créé avec Inscape :

On peut aussi intégrer un fichier svg dans une page HTML existante
https://www.w3schools.com/graphics/svg_inhtml.asp

Et en jouant avec le DOM ou/et javascript,
on peut même interagir avec les éléments affichés du fichier svg
https://www.w3schools.com/js/js_htmldom.asp
https://www.w3.org/TR/SVG11/svgdom.html

… exporter un SVG en HTML5 sous Inkcape (pour l’inclure dans une page web et avoir comme ça du responsive sur le fond). …

Sans voir le contenu du fichier SVG ni celui de la page web (et de sa ou ses feuilles CSS et scripts éventuels) et sans savoir dans quel élément le SVG sera inséré
je ne vois pas du tout ce que l'on pourrait te conseiller.

Dernière modification par MicP (Le 02/06/2022, à 11:44)

abecidofugy

Re : Exporter un SVG en HTML5 (sous Inkscape)

@MicP : salut

Euh, oui, je voulais parler d’un svg embeded pour pouvoir l’éditer facilement à partir de mon CMS et son module wysiwyg.

Les différents slides de mon carrousel présenteraient quelque chose dans le genre :

<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>

Comme on peut empêcher l’indexation d’un svg (comme dit plus haut) je pense que ça marche aussi en embeded. L’intérêt ? Que la sémantique de mes témoignages ne vienne pas polluer ma page qui cherche à bien se placer sur des mots-clés.

MicP

Re : Exporter un SVG en HTML5 (sous Inkscape)

Pour demander aux moteurs de recherche de ne pas inclure dans son index la page web
dans l'en-tête (<header>……</header>) de la page web on peut insérer la balise suivante :

<meta name="robots" content="noindex">

https://developers.google.com/search/do … _tag?hl=fr

abecidofugy

Re : Exporter un SVG en HTML5 (sous Inkscape)

Pour demander aux moteurs de recherche de ne pas inclure dans son index la page web
dans l'en-tête (<header>……</header>) de la page web on peut insérer la balise suivante :

<meta name="robots" content="noindex">

https://developers.google.com/search/do … _tag?hl=fr

Oui je sais. Ma page doit être indexée, mais les SVG embeded je voudrais que non. S’ils ne sont pas indexés, on peut imaginer que le robot n’en tiendra pas compte pour évaluer la sémantique de la page. Et ça protège mon texte des recherches.

Dernière modification par abecidofugy (Le 31/05/2022, à 18:51)

abecidofugy

Re : Exporter un SVG en HTML5 (sous Inkscape)

L’avantage aussi d’un texte en SVG, est qu’il n’est pas sélectionnable à la souris

abecidofugy

Re : Exporter un SVG en HTML5 (sous Inkscape)

En fait, j’avais été intrigué par la solution mise en place sur le site de Boostrap https://getbootstrap.com/docs/5.1/components/carousel/
Les images sont des SVG embeded. Et ça s’affiche très bien aussi sur mobile.

Mais là, j’ai du mal à centrer mon texte svg en éditant le code, j’ai essayé avec le css, mais affichage bugué sur mobile. Alors que leur exemple est bon… Aussi, je jette l’éponge pour la soirée et passe à autre chose.

Dernière modification par abecidofugy (Le 31/05/2022, à 19:34)

MicP

Re : Exporter un SVG en HTML5 (sous Inkscape)

…j’ai du mal à centrer mon texte svg …

Tu avais formulé ta balise text comme ça :

<text  x="50%" y="50%" fill="#333" dy=".3em">Third slide</text>

Mais formulée comme ça, c'est le coin en haut et à gauche de ton texte
qui sera positionné (par les attributs : x="50%" y="50%") en plein centre du conteneur de ta balise text

Pour que ton texte soit centré, et ce, quelque soit la longueur du texte et la taille de la police de caractères utilisée,
utilise l'attribut : text-anchor, et ne mets pas de décalage sur l'axe y : dy=".3em"
Comme ça :

<text text-anchor="middle" x="50%" y="50%" fill="#333">Third slide</text>

ce qui donnerait ans ton fichier svg :

<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"></rect><text text-anchor="middle" x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>

Voir aussi (en français): https://developer.mozilla.org/fr/docs/W … ext-anchor

Dernière modification par MicP (Le 02/06/2022, à 11:46)