[Résolu] Images en svg

Bonjour à tous,

Je commence à apprendre le svg et je veux faire des listes à puces. J'essaie de poser des questions en même temps .
1. Autour du dessin fait par illustrator, doit-on mettre une marge transparente de 1 px ou prendre le dessin tel quel sans marge ?
2. Mes puces changent de couleur selon les chapitres et j'ai vu qu'on peut appliquer des couleurs de remplissage différents. Est-ce utile de faire des sprites svg comme les sprites en png (une seule requête) pour toutes les puces ou cela n'a pas d'intérêt. Les ul et li sont appelés par un css indépendant. Mon site a plus de 1000 pages, donc, j'aimerais pouvoir modifier en une fois tout le site.
3. J'aurai d'autres images en svg. S'il faut faire un sprite, faut-il en faire un seul ou un pour les puces et un pour les autres par exemple ? Quel gain pour le serveur ?
Merci de répondre à ces questions basiques.

1) De mémoire j'ai jamais eu trop de problème avec ça mais tu peux prendre 1 pixel pour t'assurer de ne pas rogner malencontreusement ton image.

2) Si tu as des icônes monochrome, tu peux faire une typo avec tes pictogrammes commefont awesome et ensuite faire varier la couleur avec du css (un outil en passant fontello). Il y a toujours de l'intérêt à faire le moins de requête possible quand c'est possible pas trop contraignant.

3) Personnellement je mettrai toutes les icônes du site dans un typo et ce à condition d'en avoir suffisamment. Si tu affiches un puces par page tu ne vas pas vraiment gagner grand chose à faire des sprites et tout le toutim. Pour les images qui viennent illustrer les articles je ferai un fichier par image car trop contraignant voir illogique de faire autrement.

Bonjour et merci pour ta réponse,

Je pense effectivement que je vais passer par awesome pour être plus simple.

Mais autre question idiote, je veux faire une flèche toute bête dans un texte de bas de page et je voudrais qu'elle soit plus grande que le texte et centré sur la ligne du texte.
Si je met la balise <i> cela grandit tout, ce qui est normal, <span> est bon, mais ne centre rien.
Dans le css séparé, dois-je faire un dysplay, et lequel, pour pouvoir mettre une grandeur, un margin ou un padding correct qui n'influence que la flèche, et comment appeler la flèche awesome dans ce cas dans le css ?

Merci d'avance

C'est une typo donc tu peux utiliser font-size pour agrandir. Je suppose que tu as une css quelconque sur i ou span qui fait varier la taille de l'icône si tu vois une différence de taille.

Pour le centrage c'est les technique classiques :

margin: 0 auto;

ou

.element-parent {
text-align:center;
}

.icon {
display:inline-block;
}

Sinon le svg est de loin pas à écarter et procure de gros avantages par rapport à une font-icon. On peut aussi faire des «sprites» bien que ça soit un peu plus complexe à mettre en place.

Un article sur les icones en svg (en anglais) très intéressant: https://css-tricks.com/svg-sprites-use-better-icon-fonts

Je reviens vers bzh, mais je retiens ce que m'a dit kustolovic car j'avais commencé comme cela.
Je suis vraiment ignare et complètement idiot car si je met une flèche ou même deux dans un même paragraphe.
Si

.flechetabot {
	display:inline-block;
font-size: 1.5em;}

et

<p>Google Fonts : Fontes de Google gratuites. Plus de cent familles <div class="flechetabot"><span class="fa fa-arrow-right"</span></div>de polices différentes et diverses <div class="flechetabot"><span class="fa fa-arrow-right"</span></div>fonctions de prévisualisation.</p>

alors, la première flèche passe à la ligne et la deuxième est correctement alignée.
après à force de changer le span de l'image par i, tout le texte s'agrandit…… je ne comprend plus rien .
Quand je met le style directement dans la flèche genre <span class="fa fa-arrow-right" style="font-size:60px;color:red;></span>, la flèche apparaît bien mais non centrée sur le texte.
Merci

Quelle css tu as pour centrer ton image ?

rien de plus que ce que j'ai marqué :
Le text align-center n'a rien donné non plus.
J'ai trouvé sur un site une autre manière : on pouvait mettre un :

.menu {
		list-style: none;
	}
	.menu li {
		display: inline;
	}
	.menu i {
		font-size: 2em;
		text-align: center;
		color:red;
	}
	.menu span {
	padding-left: 0.4em;
	}

mais cela ne règle pas le fait que la flèche n'est pas bien centrée sur le texte.

Merci

Pour centrer verticalement il faut utiliser vertical align. Comme ici : Icon and text

Merci de m'avoir donner cette solution.
j'emploie alors :

vertical-align:20%;

et j'obtiens exactement ce que je veux.
À bientôt car je pense que je n'ai pas fini de poser des questions