Comment recadrer un fichier SVG en HTML/CSS
J'ai le fichier HTML suivant (mypage.html). Un fichier SVG file Est joint en tant qu’image.
<!doctype html>
<html>
<body>
<!-- Display legend -->
<div>
<center> <img src="circos-table-image-medium.svg" height=3500; width=3500; /> </center>
</div>
</body>
</html>
La page qu'il génère ressemble à ceci:
Notez qu'il y a un grand espace blanc autour du cercle . Comment puis-je le rogner au sein de HTML ou CSS?
Surgir
Vous pouvez recadrer l'image en utilisant des marges négatives et en fixant la taille de l'élément parent:
CSS Afficher une image redimensionnée et recadrée
MAIS CECI IS UN SVG!
Vous pouvez non seulement afficher un svg directement en HTML:
<svg viewBox="0 0 100 100" height="150px" width="150px">
<rect x="10" y="10" rx="5" width="80" height="80" fill="pink" stroke="green" stroke-width="5"/>
</svg>mais pour recadrer/redimensionner et svg, vous pouvez simplement modifier l'attribut viewBox sur le svg:
viewBox="0 0 100 100"
affichera quoi que ce soit entre 0 et 100 unités de x et y
viewBox="-100 -100 100 100"
Affiche tout ce qui est compris entre -100 et 100 unités x & y
viewBox="50 50 500 500"
Affiche n'importe quoi de 50 à 500 unités x & y
Aucune de ces réponses (et plusieurs similaires/doublons) n'a semblé répondre complètement à cette question et ne constitue un exemple.
Pas à pas: Supprimez le "remplissage" (espace blanc environnant) directement dans le code SVG.
Déterminez la taille "réelle" de votre svg sans remplissage. Pour moi, c'était plus facile à faire en utilisant l'inspecteur (Chrome) et en survolant l'élément path dans l'inspecteur. Vous verrez la largeur et la hauteur affichées à côté du svg réel dans votre navigateur.
- S'il y a plusieurs éléments de chemin, j'ai trouvé que le dernier est souvent l'élément "contenant".
Maintenant, éditez le code svg directement dans l'éditeur de texte/code de votre choix. Vous ne modifierez le code que dans la balise d'élément svg.
- Remplacez les attributs de largeur et de hauteur par les dimensions "réelles" déterminées à l'étape 1.
- Changer les 4 dimensions de l'attribut viewBox. Pas d'unités cependant, juste les nombres (c'est-à-dire 10 pas 10px) .
- Nous allons commencer avec les 3ème et 4ème chiffres, qui seront encore votre largeur et hauteur "réelles".
- Les 1re et 2e dimensions sont les coordonnées x et y pour "l'origine" de la partie du svg qui se trouve dans la vue. Celles-ci seront respectivement modifiées (de ce qui était probablement 0 0) en: demi de la différence entre la largeur et la hauteur initiales et la largeur et la hauteur réelles. En termes plus simples (CSS), votre marge gauche et votre marge supérieure.
Confus? Exemple pas à pas simple
Cet exemple le rendra extrêmement simple et utilisera le svg directement ci-dessous comme référence. Si vous souhaitez parcourir cet exemple, enveloppez tout le code ci-dessous dans les balises HTML <html> svg code </html> et ouvrez-le dans votre navigateur.
<svg xmlns="http://www.w3.org/2000/svg" width="48"
height="48" viewBox="0 0 48 48">
<path d="M40 4H8C5.79 4 4.02 5.79 4.02 8L4 44l8-8h28c2.21
0 4-1.79 4-4V8c0-2.21-1.79-4-4-4zM12
18h24v4H12v-4zm16 10H12v-4h16v4zm8-12H12v-4h24v4z"/></svg>
+ Nous supposerons que vous avez été en mesure d'effectuer l'étape 1 et de déterminer les dimensions "réelles" de votre svg sans remplissage. Pour cet exemple, les dimensions réelles sont 40 x 40. Modifiez les attributs svg pour refléter cela.
width="40" height="40"
+ Nos dimensions initiales étaient de 48 x 48 et nos dimensions réelles (sans rembourrage) étaient de 40 x 40. La moitié de cette différence est de 4 x 4. Modifiez l'attribut viewBox en conséquence et ajoutez nos largeur et hauteur réelles.
viewBox="4 4 40 40"
+ Notre balise svg d'ouverture devrait maintenant refléter ces changements.
<svg xmlns="http://www.w3.org/2000/svg" width="40"
height="40" viewBox="4 4 40 40">
+ Si le remplissage autour de votre svg a des montants différents pour le haut/bas et droite/gauche, ce n'est pas un problème. Suivez simplement les instructions standard ci-dessus, puis jouez avec les 2 premières valeurs de la propriété viewBox pour comprendre comment ces valeurs décalent l'image le long des axes x et y.
Je viens d'apprendre tout cela ce soir en traitant du même problème. Entièrement ouvert aux suggestions/modifications de toute personne mieux informée que moi en matière de manipulation de graphiques vectoriels à l'échelle
Il suffit d'utiliser Inkscape .
Je recommande tout d'abord de lire l'article de David Rebd sur le réglage des dimensions de l'image SVG via un éditeur de texte (tel que Notepad ++).
Ensuite, dans Inkscape, cliquez simplement sur l'élément et vous pourrez littéralement définir les dimensions sans même avoir à vous soucier du déplacement précis de la souris.
Si la barre d'outils est manquante, cliquez sur le menu Voir, puis sur Show/Hide et activez la barre de contrôle Outils.
Avant d'essayer de corriger avec du code, vous souhaiterez peut-être optimiser votre structure de SVG. L'espace blanc visible dans Inspector fait allusion au fait que le SVG n'est pas étroitement défini sur la planche graphique. Si vous avez Adobe Illustrator disponible, ouvrez votre fichier SVG dans celui-ci. Vous devriez voir quelque chose de semblable à ceci:
La zone blanche est votre planche d’art, le cercle votre SVG. Ce que vous voulez faire, c'est vous assurer que votre SVG a la même taille que la planche graphique. Ce bouton vous permet de redimensionner votre artboard:
Sélectionnez cela, sélectionnez votre carré blanc, amenez les bords pour toucher votre cercle et sauvegardez votre SVG.
L’autre solution potentielle à votre fichier SVG peut être qu’il existe un masque de découpage qui étend la taille du graphique SVG. Dans ce cas, vous devrez supprimer ces masques dans la mesure du possible. Pour savoir si un masque de découpage affecte votre fichier SVG, cliquez sur votre cercle. Si la zone environnante ne touche pas les bords de votre cercle lorsque vous la sélectionnez, vous disposez d'un masque de découpage qui repousse les limites de votre image.
En regardant votre image, cela pourrait être assez compliqué et si vous n'êtes pas trop familiarisé avec l'édition de vecteurs, il sera peut-être plus rapide et plus facile de la renvoyer à un concepteur.