18049 sujets

Questions générales et questions de débutants

[Résolu] Intégration image SVG dans code html

Bonjour,

Une petite flèche de défilement format SVG qui apparaît sur de nombreuses pages.

Je l'intègre au code HTML plutôt que la traiter comme une image, qu'en pensez-vous ?

Voir le codepen.

J'ai simplifié les codes SVG et CSS au maximum de mes connaissances.

Cela fonctionne mais cela vous semble-t-il bien optimisé pour tous les navigateurs ?

Je me pose des questions pour la définition de la taille :

a#ras > svg {stroke-width: 14px; height: 17.12541806px}


Merci d'avance.
Modérateur
Salut,

insérer un svg pour une flèche, je ne pense pas que ce soit pertinent. Il y a ceci provenant de cette liste
Bonjour niuxe,

Ah oui, merci pour le lien.

Néanmoins je pense personnaliser un peu ma flèche, d'où l'image vectorielle au lieu d'un caractère Unicode.

D'ailleurs, en bas de page sur ce forum je vois une flèche qui semble personnalisée.
Je comprends,

L'unicode c'est traître souvent : on crois qu'on a fait le tour avec la compatibilité de tous les navigateurs pour vérifier la compatibilité du caractère unicode... et puis non, on n'a pas vu que ça ne passait pas sur tel navigateur en version mobile. Et en plus, les unicodes peuvent être rendu différemment d'un navigateur à l'autre.

Non, vraiment, à quelques exceptions près, je penche en faveur des SVG.

Pour deux ou trois icônes, des SVGs, injectés directement en inline feront l'affaire ; au delà d'une vingtaine commencer à réfléchir aux sprites SVG.
Olivier C a écrit :
Non, vraiment, à quelques exceptions près, je penche en faveur des SVG.


C'est noté.

Autres arguments :
le rendu d'un SVG est de même qualité qu'un Unicode
le temps d'affichage est non-perceptible.
Pour intégrer une image SVG dans du code HTML, il existe plusieurs méthodes. Voici quelques-unes des plus courantes :

### 1. Utiliser la balise `<img>`

Vous pouvez inclure un fichier SVG en utilisant la balise `<img>` comme suit :

```html
<img src="chemin/vers/votre-image.svg" alt="Description de l'image">
```

### 2. Utiliser la balise `<object>`

Cette méthode permet également de gérer des interactions et des scripts dans le SVG :

```html
<object type="image/svg+xml" data="chemin/vers/votre-image.svg">
Votre navigateur ne supporte pas les SVG.
</object>
```

### 3. Intégrer le SVG directement dans le HTML

Vous pouvez copier le code SVG directement dans votre document HTML :

```html
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
```

### 4. Utiliser CSS pour le fond

Vous pouvez également utiliser un SVG comme image de fond via CSS :

```html
<div class="mon-div"></div>

<style>
.mon-div {
width: 100px;
height: 100px;
background-image: url('chemin/vers/votre-image.svg');
}
</style>
```

### Remarques

- Assurez-vous que le chemin vers le fichier SVG est correct.
- Le SVG peut être stylisé avec du CSS, surtout s'il est intégré directement dans le HTML.
- Certains navigateurs peuvent avoir des limitations sur l'affichage des SVG selon la méthode utilisée.

Choisissez la méthode qui convient le mieux à vos besoins et à votre projet !
Modérateur
Olivier C a écrit :
Je comprends,

L'unicode c'est traître souvent : on crois qu'on a fait le tour avec la compatibilité de tous les navigateurs pour vérifier la compatibilité du caractère unicode... et puis non, on n'a pas vu que ça ne passait pas sur tel navigateur en version mobile. Et en plus, les unicodes peuvent être rendu différemment d'un navigateur à l'autre.

Non, vraiment, à quelques exceptions près, je penche en faveur des SVG.

Pour deux ou trois icônes, des SVGs, injectés directement en inline feront l'affaire ; au delà d'une vingtaine commencer à réfléchir aux sprites SVG.


Ce que j'ai suggéré repose sur l'utilisation d’entités HTML, conformément aux recommandations du W3Schools. Toutefois, si le nombre d'icônes est important, il est également possible d’opter pour une police de caractères personnalisée.¹²³

_____
¹ Créer une police d’icônes facilement à partir d’illustrations vectorielles
² Optimisez vos polices web
³ Accélérez vos polices d'icônes !
Modifié par niuxe (04 Nov 2024 - 09:55)
niuxe a écrit :

[...] conformément aux recommandations du W3Schools.


Bonjour, le W3Schools ne fait aucune recommandation! Ne pas confondre W3Schools et W3C qui lui en fait.
Modérateur
Bonjour,

Olivier C a écrit :
Non, vraiment, à quelques exceptions près, je penche en faveur des SVG.
+1

niuxe a écrit :
Ce que j'ai suggéré repose sur l'utilisation d’entités HTML, conformément aux recommandations du W3Schools.
Beaucoup de codes qu'on trouve sur W3Schools datent un peu.

Amicalement,
Modérateur
parsimonhi a écrit :
Beaucoup de codes qu'on trouve sur W3Schools datent un peu.


Ça date, mais ça fonctionne bien Smiley cligne Justement, j'ai opté pour le W3School afin de proposer une solution pérenne. La preuve, le lien fonctionne bien. Parfois, ce n'est pas la peine de sortir la grosse artillerie. Rester simple et efficace¹

____
¹ KISS
niuxe a écrit :
Ça date, mais ça fonctionne bien Smiley cligne Justement, j'ai opté pour le W3School afin de proposer une solution pérenne. La preuve, le lien fonctionne bien. Parfois, ce n'est pas la peine de sortir la grosse artillerie. Rester simple et efficace.

Et bien justement niuxe ! Très bon exemple ! Là, en l'occurrence : ta flèche bas, sur mon Android 12 + Chrome... j'ai un carré blanc.

Il y a quelques années, Raphaël s'était amusé à faire le tour des Unicodes compatibles avec "tout" : https://goetter.fr/unicode/

N'en reste pas moins le problème du rendu, légèrement différent entre chaque navigateur. Voir même, pour certains Unicode, carrément différent.
Modifié par Olivier C (04 Nov 2024 - 15:53)
Modérateur
Olivier C a écrit :

Et bien justement niuxe ! Très bon exemple ! Là, en l'occurrence, ta flèche bas, sur mon Android 12 + Chrome : j'ai un carré blanc...

Je viens de vérifier sur mon téléphone et, toutes mes excuses, il semble que je me sois trompé. J’étais pourtant presque certain que le caractère s’affichait correctement. Smiley confused

Dans ce cas, la meilleure solution serait de créer une police personnalisée, comme je l’ai évoqué précédemment.
Modifié par niuxe (04 Nov 2024 - 15:58)
Bonjour,

1) GoCuCo, merci pour ce rappel.
Pour un code très léger, ce qui est mon cas, j'ai hésité entre <img> et l'intégration dans le code HTML.
Dans le code HTML il y a une requête en moins vers le serveur mais avec <img> le dessin doit être mis en cache.
Je pense que c'est kif-kif, j'ai choisi l'intégration dans le code HTML.

2) Dans la série flèche j'utilise l'entité HTML &crarr; et à ma connaissance c'est bien supporté : lien.

EDIT : remplacé par un ? sur ce forum, pourquoi ?

caractère UTF-8 : ? (détail)
code html entité : aucun
code html déc. : &#8629;
code html uni. : &#x21B5;
code css : \0021B5
code Js : \u21b5

Bon encodage : ?
&crarr; = ?
&#8629; = ?
&#x21B5; = ?

3) Personne n'a fait de remarque sur le code SVG et CSS du codepen, donc je suppose que c'est bon.
Modifié par boteha_2 (04 Nov 2024 - 19:27)
Modérateur
boteha_2 a écrit :


3) Personne n'a fait de remarque sur le code SVG et CSS du codepen, donc je suppose que c'est bon.


nop Smiley cligne
Pourquoi ? title. Tu peux aussi utiliser l'attribut aria-label. Là où je veux en venir est que ton SVG affiche une image que les lecteurs d'écran ne seront pas capables d'interpréter sans l'attribut aria-label ou l'élément <title>. Suivant le contexte, tu peux aussi utiliser un <span> dans ton <a>.
Modifié par niuxe (04 Nov 2024 - 19:33)
Administrateur
Bonjour,

boteha_2 a écrit :
EDIT : remplacé par un ? sur ce forum, pourquoi ?

Le Forum est ancien, très ancien. Smiley cligne
Quand les emojis s'appelaient smileys et s'écrivaient "; - )", quand phpBB nous régalait de son bbcode (et de sa lenteur) et que Markdown n'existait pas, quand dew surfait avec un confortable débit de 256 kbps Smiley program , le code de ce forum tournait déjà (pour un autre site, vu qu'Alsa existait encore moins) Smiley guitare
L'encodage de la base de données est je crois passé de windows-1252 à iso-8859-15 il y a plus de 10 ans, ça tourne encore et les efforts et le temps nécessaires pour passer en UTF-8 (et surtout pour nettoyer l'UTF-8 exotique que les membres pourraient saisir) seraient disproportionnés pour ce que ça apporterait Smiley crazy
Modifié par Felipe (05 Nov 2024 - 01:00)
Bonjour,

Felipe a écrit :
quand phpBB nous régalait de son bbcode (et de sa lenteur)


Et de ses failles de sécurité, j'en ai fait l'expérience.

Bien meilleur est miniBB, je me permets cette publicité gratuite.

En plus le développeur qui s'appelle Paul répond aux questions.
Bonjour,

Juste un détail.

Dans le codepen, voir le code de la dernière flèche, id="dernier".

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 146.86 199.77">
<title>Aller en bas de page</title>
<line x1="73.44" y1="10" x2="73.44" y2="196.77"/>
<path d="m73.44,3c3.87,0,7,3.13,7,7v169.94c0,3.87-3.13,7-7,7s-7-3.13-7-7V10c0-3.87,3.13-7,7-7Z"/>
<path d="m6.24,84.25c3.25-2.08,7.59-1.11,9.67,2.16l57.53,90.33,57.53-90.33c2.08-3.27,6.41-4.24,9.67-2.16,3.25,2.08,4.2,6.44,2.15,9.68l-63.44,99.6c-1.29,2.01-3.51,3.24-5.91,3.24s-4.62-1.23-5.91-3.24L4.09,93.93c-.74-1.18-1.09-2.47-1.09-3.76,0-2.31,1.15-4.58,3.24-5.92Z"/>
</svg>


Une graphiste m'envoie son image faite sous Illustrator j'ouvre la source et sans connaitre le langage SVG je nettoie des déclarations qui me semblent inutiles.

Bien conforme pour tous les navigateurs ?
Rien n'est oublié ?

Merci d'avance.
Prévenir un modérateur
Répondre au sujet
Aller à