Cambiar atributo viewbox en svg exportado por illustrator

Me he encontrado con este problema varias veces, y lo único que me ha funcionado para restablecer de manera confiable el cuadro de visualización SVG a exactamente 0, 0 al exportar desde Illustrator es crear un nuevo documento en blanco y copiar y pegar la ilustración en él. .

La esquina superior izquierda de esta mesa de trabajo predeterminada intacta se exportará como el punto 0, 0 del cuadro de vista. Utilice las guías inteligentes ( cmd-u) o la alignventana establecida en Align to Artboardsi necesita que su obra de arte comience exactamente en 0, 0.

Puede cambiar el tamaño de la mesa de trabajo de forma segura desde la esquina inferior derecha, pero las cosas empiezan a salir mal si mueve la esquina superior izquierda. Mover la esquina superior izquierda de las mesas de trabajo o importar archivos SVG a AI parece causar algún tipo de extraña desconexión interna entre las reglas, las mesas de trabajo y algún tipo de punto de origen invisible y secreto del cuadro de visualización que solo Illustrator conoce.

AFAICT, como con la mayoría de las cosas que tienen que ver con la web o la tecnología emergente, el enfoque de Adobe para SVG ha sido juntar algo crudamente para que puedan presumir de ello en un comunicado de prensa, luego dejarlo con errores, sin terminar y sin amor, fingiendo que no lo hace. existiendo y continuando como si fuera 1998.

Sé que es muy tarde para el tema, pero tuve este mismo problema e hice lo siguiente.

1. Abra el SVG en un editor de texto y cambie el atributo viewBox a 0 0 xy
2. Guárdalo y vuelve a abrirlo en Illustrator
3. La obra de arte ahora se colocará fuera de la mesa de trabajo; muévala de nuevo a 0 0
4. Guarde y obtenga una vista previa, todo debería funcionar bien.

Espero que esto ayude a alguien más.

Investigué un poco sobre los SVG y, aparentemente, el cuadro de visualización no es un elemento exportable a través de Illustrator. El elemento viewbox solo es compatible con ciertos programas que optaron por usar este elemento o manipularlo. Lamentablemente, Illustrator no es uno de ellos.

Si guardó el SVG de Illustrator sin "Conservar las capacidades de edición de Illustrator", puede revertir el proceso. Cualquier cambio que realice en los datos del archivo SVG se reflejará en Illustrator, pero reposicionando y redimensionando tanto la mesa de trabajo como las capas para crear un pseudo-viewbox.

Por ahora, todo lo que puede hacer es diseñar el trabajo en Illustrator y todo el código adicional para el desplazamiento y el posicionamiento del cuadro de vista dentro de los datos del archivo. Puede crear un pseudo-cuadro de vista simplemente cambiando la posición Ancho + Alto/X + Y de las mesas de trabajo y luego cambiando también los atributos Tamaño y Posición de los objetos. Pero nunca habrá un verdadero atributo de cuadro de visualización a menos que publiquen una actualización de Illustrator con funciones de cuadro de visualización editables.

Algunas lecturas sobre el formato SVG en Illustrator: Adobe Illustrator Guardar en formato SVG

Tuve un problema muy similar que mi SVG creado por AI no estaba centrado y expandido a la ventana completa del navegador, porque AI sigue cambiando el tamaño de la mesa de trabajo y se olvida del centrado.

La única forma de solucionarlo es tener un paso final de procesamiento manual en Inkscape.

• abrir el SVG en Inkscape
• cambie el tamaño del lienzo en Archivo -> Propiedades del documento
• cambie el tamaño y mueva su obra de arte seleccionándola e ingresando w, h en las ediciones de la barra de herramientas

Finalmente, debe guardar el SVG nuevamente, pero use el formato "SVG optimizado" en el cuadro de diálogo Guardar como. Habrá un cuadro de diálogo para las opciones de SVG y deberá habilitar "Habilitar viewboxing".

Como todos mis SVG son íconos del mismo tamaño, este paso de procesamiento toma solo 1 minuto ya que siempre tengo el mismo lienzo y el mismo tamaño de objeto. Pero sí, es una pena que este paso sea necesario y debería corregirse en AI.

Me he dado cuenta de esto. ¡Finalmente! Hay una manera simple de hacer esto. Al igual que:

<svg id="xbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60.7"><title>xbox</title><rect width="200" height="60.68" style="fill:none"/><path d="M195.2,49.2l-11.8-16-11.5,16h-4.8L181.2,30,168.4,12.8h4.8l10.2,14,10.5-14h4.8L185.9,30,200,49.2Zm-90.7,0L90.4,30l12.8-17.2H98.4l-10.5,14-10.3-14H72.8L85.6,30l-14,19.2h4.8l11.5-16,11.8,16Z" style="fill:#0f7c10"/><path d="M131,31.3l-2.2-1.6a8.2,8.2,0,0,0,4.4-7c0-2.6-.9-9.9-12.1-9.9H106.4V28.4h-4.8l-2.9,3.5h7.7V49.2h14.7c8.3,0,13.1-4.2,13.1-10.9a8.6,8.6,0,0,0-3.2-7m-20.5-15h10.6c3.2,0,8,1,8,6.1s-2.9,6-8,6H110.5Zm10.6,29.1H110.5V31.9h10.6c4.1,0,8.9,1.3,8.9,6.4s-5.4,7.1-8.9,7.1m32.3-33.6c-10.3,0-17.3,7.7-17.3,19.2s7,18.8,17.3,18.8,17.5-7.6,17.5-18.8-7.3-19.2-17.5-19.2m0,34.2c-7.7,0-13.1-6.1-13.1-15s5.4-15.3,13.1-15.3S166.8,22,166.8,31s-5.5,15-13.4,15M8.9,8.6h0A31,31,0,0,0,0,30.4,32.5,32.5,0,0,0,6.1,48.9h.3C4.2,41.5,16,24.3,22,16.9h0C11.8,6.4,8.9,8.9,8.9,8.6m42.9,0h0a31,31,0,0,1,8.9,21.8,32.5,32.5,0,0,1-6.1,18.5h-.3c2.2-7-9.6-24.3-15.6-31.6h0C48.9,7,51.8,9.6,51.8,9.3M30.4,0A29.9,29.9,0,0,1,46.3,4.5h0c0,.3,0,.3-.3.3C40.3,3.5,31.3,8.3,30.4,8.9h0C28.1,7.7,19.8,3.2,14.7,4.8a.3.3,0,0,1-.3-.3h0A30,30,0,0,1,30.4,0m0,24.3h0c9.2,7,24.9,24.3,20.1,29.1h0a31.5,31.5,0,0,1-40.3,0h0C5.8,48.6,21.1,31.3,30.4,24.3h0" style="fill:#0f7c10"/></svg>

El problema era que cuando exportaba una imagen de Illustrator (como muchos lo hacen), la mesa de trabajo no se incluía en el SVG exportado. Los caminos no tienen nada en qué basar sus cálculos.

En mi caso, la altura máxima para mis imágenes era 100pxy necesitaba basar los estilos CSS para estas imágenes en función de su ancho y alto. En CSS, uso vwunidades, o simplemente antiguo 100%si el SVG es para llenar el espacio del bloque. Esto escala muy bien. De esa manera, no tendrá que preocuparse por configurar el ancho y la altura en CSS para asegurarse de que se muestre correctamente.

Revisé cada logotipo y configuré la altura 100pxy dejé que el ancho se calculara automáticamente en función de la relación de aspecto. Luego ajusto la mesa de trabajo al logotipo para eliminar cualquier espacio no utilizado.

Seleccioné un rectángulo y desactivé el relleno y el trazo y me aseguré de que tuviera exactamente el mismo tamaño que la mesa de trabajo. Coloque este objeto en blanco en la parte posterior. Ahora, cuando exporte, la ruta tendrá una base para trabajar en los cálculos.

Para hacer esto en el código, parece que puede envolver las rutas en a recty establecer su ancho y alto, y luego puede establecer lo viewBoxmismo (mantener las relaciones de aspecto iguales). Como se muestra en el ejemplo anterior. En realidad no he probado esto, pero lo probaré y actualizaré.

Pude arreglarlo usando Inkscape . Parece que Illustrator tiene poca compatibilidad con archivos SVG.

1. Abra el archivo svg en InkscapeCTRL + O
2. Luego crea un nuevo archivoCTRL + N
3. CTRL + SHIFT + DPropiedades del documento y ajuste el tamaño de la mesa de trabajo.
4. Seleccione y copie el svg en el archivo recién creado.
5. Ahora ajuste el activo cambiando los valores de posición y tamaño. Como establecer la posición como Origen y el ancho y alto como el tamaño del documento.
6. Guarde el nuevo archivo.

1.en adobe illustrator selecciona tu camino

2. luego ve al panel de la mesa de trabajo

3.Haga clic en el icono de opciones de la mesa de trabajo

4.Desde el panel preestablecido, elija el ajuste a los límites de la obra de arte

5.Haga clic en Aceptar.

6.resultado es este:

7.<viewBox="0 0 407.02 660.98">

8.viewbox minx y miny se establece en 0 0 sin traducción