redimensionner un SVG
☞ tout se passe dans ton navigateur — rien n’est envoyéDépose ton SVG ici
ou clique pour parcourir — SVG uniquement
Aperçu
redimensionner un SVG
Donne à un SVG une nouvelle largeur et une nouvelle hauteur — ou retire-les entièrement pour qu'il s'adapte à son conteneur. Le dessin lui-même n'est jamais touché.
ou clique pour parcourir — SVG uniquement
Aperçu
rien n'est redessiné
Une image matricielle doit être redessinée à la nouvelle taille, et du détail se perd ou s'invente au passage. Un SVG porte au contraire les instructions de dessin : le redimensionner n'est qu'une note indiquant à quelle taille l'afficher. Chaque tracé, chaque couleur et chaque dégradé reste exactement tel quel.
Cette note, c'est le couple width / height. La viewBox en dessous définit le système de coordonnées interne et n'est pas touchée — c'est toute la raison pour laquelle les formes s'agrandissent au lieu d'être rognées.
trois étapes
Choisis un fichier .svg — il reste sur ton appareil.
Saisis une largeur, choisis un pourcentage, ou passe en responsive.
Tu obtiens le même dessin à la taille demandée.
réponses rapides
Non. Il n'y a rien à flouter — le fichier décrit des formes, pas des pixels, il est donc redessiné à la taille que tu lui donnes. Cela vaut à 25 % comme à 400 %.
Cela rend le SVG responsive. Sans ces attributs, le navigateur se rabat sur la viewBox pour le rapport d'aspect et laisse l'élément remplir son conteneur : tu le dimensionnes alors en CSS. C'est le choix habituel pour les icônes d'une bibliothèque de composants.
Une viewBox est ajoutée pour toi dans ce cas. Sans elle, un SVG traite ses coordonnées comme de simples pixels : changer la largeur rognerait le dessin ou le comblerait de vide au lieu de le mettre à l'échelle. La viewBox ajoutée correspond à la taille d'origine, rien ne bouge donc.
À peine — seuls deux nombres changent. Si tu veux un fichier plus léger, passe-le dans l'optimiseur SVG, qui supprime les métadonnées d'éditeur et les coordonnées trop précises.
Non. Le fichier est analysé et réécrit dans ton navigateur.