web-dev-qa-db-fra.com

Comment puis-je redimensionner un SVG obstiné incorporé avec la balise <object>?

J'ai quelques fichiers SVG qui spécifient width et height ainsi que viewbox comme ceci:

<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...

mais comment les afficher dans le navigateur à une taille que je décide? Je les veux plus petits et j'ai essayé:

<object width="400" data="image.svg"></object>

mais alors j'obtiens des barres de défilement visibles.

Cela fonctionne si je change les fichiers SVG pour définir width et height sur 100% à la place, mais je veux décider de la taille du fichier HTML, quelles que soient les tailles utilisées dans le fichier SVG. Est-ce possible ?

htmlsvg
109
Zitrax

Aucune des réponses données ici ne fonctionnait pour moi lorsque j'ai posé cette question en 2009. Comme j'avais maintenant le même problème, j'ai remarqué que l'utilisation de la <img> tag et width avec un svg fonctionnent bien.

<img width="400" src="image.svg">
32
Zitrax

Vous pouvez ajouter les attributs "preserveAspectRatio" et "viewBox" à l'objet <svg> tag pour y parvenir.

Ouvrez le fichier .svg dans un éditeur et trouvez le fichier <svg> tag. dans cette balise, ajoutez les attributs suivants:

preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"

Remplacez {width} et {height} par des valeurs par défaut pour le viewBox. J'ai utilisé les valeurs des attributs "width" et "height" de la balise SVG et cela a semblé fonctionner.

Enregistrez le fichier SVG et il devrait maintenant évoluer comme prévu.

J'ai trouvé cette information ici:

https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing

159
Jim Keller
<body>

<div>
<object type="image/svg+xml" data="img/logo.svg">
   <img src="img/logo.svg" alt="Browser fail" />
</object>
</div>

img/logo.svg ...

<svg
   width="100%" 
   height="100%"
   viewBox="0 0 640 80"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1" />

Cette configuration a fonctionné pour moi.

9
H Titan

Vous pouvez accéder au svg intégré en utilisant JavaScript:

var svg = document.getElementsByTagName('object')[0].\
  contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');

Étant donné que votre svg a déjà un viewBox, Firefox doit redimensionner la largeur de 576 pixels du viewBox à la largeur de 400 pixels de votre document. D'autres svgs pourraient bénéficier d'un nouveau viewBox dérivé de la largeur et de la hauteur annoncées (ce sont souvent les mêmes nombres). D'autres navigateurs pourraient bénéficier de différents réglages de svg.

9
joeforker

J'ai rencontré un problème où iOS sur iPad ne redimensionnait pas correctement les images SVG dans une balise <object>.

Le style CSS augmenterait ou diminuerait la taille du conteneur <object>, Mais l'image à l'intérieur ne serait pas modifiée (sur iPad, iOS 7).

Les images SVG ont été exportées à partir d'Adobe Illustrator et la solution s'est révélée remplacer la largeur et la hauteur de cette manière:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="481.89px" height="294.843px" viewBox="0 0 481.89 294.843" 
enable-background="new 0 0 481.89 294.843"
xml:space="preserve">

avec:

width="100%" height="100%"

J'avais besoin d'utiliser la balise <object>, Car la balise <img> Ne prend actuellement pas en charge l'intégration d'images bitmap dans des fichiers SVG.

7
Andrew Swift

  1. Définissez le viewbox manquant et entrez les valeurs de hauteur et de largeur des attributs height et height définis dans la balise svg

  2. Puis redimensionnez l'image simplement par en réglant la hauteur et la largeur aux valeurs pourcentage souhaité. Bonne chance.

  3. Vous pouvez définir un format d'image fixe avec preserveAspectRatio = "x200Y200, mais ce n'est pas nécessaire.

par exemple.

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10%" 
   height="10%"
   preserveAspectRatio="x200Y200 meet"
   viewBox="0 0 350 350"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="namesvg.svg">
5
Lorenz Lo Sauer

Utilisez simplement CSS pour que le navigateur redimensionne le SVG! Ainsi: <object style="width:30%"> Voir http://www.vlado-do.de/svg_test/ pour plus de détails. Je viens juste de l'essayer localement avec un SVG dont la largeur et la hauteur sont indiquées en "pt". Cela fonctionne bien dans Firefox.

3
Vlado

Voici une solution PHP utilisant QueryPath basée sur la réponse de Jim Keller.

Une fois que QueryPath est chargé, il suffit de transmettre votre script svg à la fonction.

function scaleableSVG($svg){
    $qp = qp($svg, 'svg');
    $width = $qp->attr('width');
    $height = $qp->attr('height');
    $qp->removeAttr('width')->removeAttr('height');                       
    $qp->attr('preserveAspectRatio', "xMinYMin meet");
    $qp->attr('viewBox', "0 0 $width $height");
    return $qp->html();
}
1
Dieter Gribnitz

Laisse voir. J'ai dû me rafraîchir la mémoire sur SVG, je ne l'ai pas beaucoup utilisé ces dernières années.

D'après ce que j'ai trouvé aujourd'hui, il semble que si vous spécifiez une dimension d'objets sans unités, ils ont une taille fixe (en pixels, je pense). Apparemment, alors, il n’ya aucun moyen de les redimensionner lorsque vous redimensionnez le SVG (cela ne change que la taille de la fenêtre de visualisation/canvas).

Comme indiqué, vous indiquez la taille du fichier SVG en pourcentage OR spécifiez un viewBox (par exemple, viewBox = "0 0 600 500").

Maintenant, si vous n'avez aucun moyen de changer le SVG exporté, je crains que vous n’ayez pas de chance. Quelle bibliothèque utilisez-vous?

1
PhiLho