para - object type text html data

¿Cómo escalo un obstinado SVG incrustado con la etiqueta<object>?

Question

Tengo algunos archivos SVG que especifican width y height , así como una viewbox como esta:

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

pero ¿cómo mostrarlos en el navegador en un tamaño que decida? Los quiero más pequeños y he intentado:

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

pero luego obtengo barras de desplazamiento visibles.

Funciona si cambio los archivos SVG para establecer el width y height al 100% , pero quiero decidir el tamaño en el HTML independientemente de los tamaños que se usen en el archivo SVG. Es posible ?

Answer 1

1. Establezca la vista que falta y complete los valores de alto y ancho de los atributos de alto y alto establecidos en la etiqueta svg

2. Luego escale la imagen simplemente estableciendo el alto y el ancho en los valores de porcentaje deseados . Buena suerte.

3. Puede establecer una relación de aspecto fija con preserveAspectRatio = "x200Y200 meet, pero no es necesario

p.ej

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

Answer 2

Aquí hay una solución PHP que utiliza QueryPath basada en la respuesta de Jim Keller.

Una vez que QueryPath está cargado, simplemente pase su script svg a la función.

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();
}

Answer 3

Me encontré con un problema donde iOS en un iPad no redimensionaría correctamente las imágenes SVG en una etiqueta <object> .

El estilo CSS aumentaría o disminuiría el tamaño del contenedor <object> , pero la imagen que contiene no se modificaría (en iPad, iOS 7).

Las imágenes SVG se exportaron desde Adobe Illustrator, y la solución resultó reemplazar el ancho y la altura en este:

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

con:

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

Necesitaba usar la etiqueta <object> porque la etiqueta <img> actualmente no admite la incrustación de imágenes de mapa de bits en SVG.

Answer 4

Ninguna de las respuestas dadas aquí funcionó para mí cuando pregunté esto en 2009. Como ahora volvía a tener el mismo problema, noté que usar la etiqueta <img> y el ancho junto con un svg funciona bien.

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

Answer 5

Puede acceder a la svg incorporada usando JavaScript:

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

Dado que su svg ya tiene un viewBox, Firefox debe escalar el ancho de 576 píxeles en el viewBox al ancho de 400 píxeles en su documento. Otros svgs pueden beneficiarse de un nuevo viewBox derivado del ancho y la altura anunciados (a menudo son los mismos números). Otros navegadores pueden beneficiarse de diferentes ajustes svg.

Answer 6

Puede agregar los atributos "preserveAspectRatio" y "viewBox" a la etiqueta <svg> para lograr esto.

Abra el archivo .svg en un editor y encuentre la etiqueta <svg> . en esa etiqueta, agregue los siguientes atributos:

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

Reemplace {ancho} y {alto} con algunos valores predeterminados para viewBox. Usé los valores de los atributos "ancho" y "alto" de la etiqueta SVG y pareció funcionar.

Guarde el SVG y ahora debería escalar como se esperaba.

Encontré esta información aquí:

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

Answer 7

Simplemente use CSS para hacer que el navegador cambie el tamaño del SVG. De esta manera: <object style="width:30%"> Vea http://www.vlado-do.de/svg_test/ para más detalles. También lo intenté localmente con un SVG que tiene su ancho y altura en "pt". Funciona bien en Firefox.

Answer 8

Vamos a ver. Tuve que actualizar mi memoria en SVG, no lo he usado mucho estos años.

Según lo que encontré hoy, parece que si especifica la dimensión de los objetos sin unidades, tienen un tamaño fijo (en píxeles, creo). Aparentemente, entonces, no hay forma de redimensionarlos cuando cambia el tamaño del SVG (solo cambia el tamaño de la ventana / lienzo).

A menos que, como se señaló, especifique el tamaño de SVG en porcentaje O especifique un viewBox (por ejemplo, viewBox = "0 0 600 500").

Ahora, si no tiene forma de cambiar el SVG exportado, me temo que no tiene suerte. ¿Qué biblioteca usas?

Answer 9

<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" />

Esta configuración funcionó para mí.