[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.

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 !

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.

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,

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

Ça date, mais ça fonctionne bien 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

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.

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)

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
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)

Ah, d'accord, j'ai ajouté un titre dans le codepen :

<title>Aller en bas de page</title>

Merci pour ton suivi.

Bonjour,

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

Le Forum est ancien, très ancien.
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 , le code de ce forum tournait déjà (pour un autre site, vu qu'Alsa existait encore moins)
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
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,

Je coche Résolu.
Modifié par boteha_2 (08 Nov 2024 - 20:24)