Tengo un archivo SVG con viewBox = "- 155.7 -99 510 510". Creo que esto compensó los caminos en la vista previa de Mac OS X en -155.7 -99. Cuando abro el SVG en Illustrator, las rutas no están compensadas en absoluto. ¿Cómo exporto este svg de modo que:
He intentado cambiar la posición de la mesa de trabajo, pero el origen de viewbox nunca es 0,0.
Respuestas:
Investigué un poco sobre SVG y, aparentemente, el viewbox no es un elemento que se pueda exportar a través de Illustrator. El elemento viewbox solo es compatible con ciertos programas que eligieron 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. Los cambios que realice en los datos del archivo SVG se reflejarán en Illustrator, pero mediante el reposicionamiento y el cambio de tamaño de la mesa de trabajo y las capas para crear una 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 de la vista dentro de los datos del archivo. Puede hacer un pseudo-viewbox simplemente cambiando la posición de Ancho de Artboards + Altura / X + Y y luego cambiando también los atributos Tamaño y Posición de los objetos. Pero nunca habrá un verdadero atributo de viewbox a menos que publiquen una actualización de Illustrator con características editables de viewbox.
Algunas lecturas sobre el formato SVG en Illustrator: Adobe Illustrator Guardar en formato SVG
Me he encontrado con este problema varias veces, y lo único que me ha funcionado para restablecer de manera confiable el cuadro de vista 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 punto 0, 0 del cuadro de vista. Utilice las guías inteligentes ( cmd-u) o el alignconjunto de ventanas en Align to Artboardsi necesita que su ilustración 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 comienzan 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 desconexión interna extraña entre las reglas, las mesas de trabajo y algún tipo de punto de origen de vista secreto invisible conocido solo por Illustrator.
AFAICT, como con la mayoría de las cosas que tienen que ver con la tecnología web o emergente, el enfoque de Adobe para SVG ha sido juntar algo groseramente para que puedan jactarse de ello en un comunicado de prensa, luego dejarlo con errores, sin terminar y sin amor, pretendiendo que no existir y continuar como si fuera 1998.
viewboxmodificación en la exportación a SVG. Tiene toda la razón al crear un nuevo documento y copiar todas las ilustraciones. Su respuesta debe marcarse como correcta +1.
Preserve Illustrator Editing Capabilitiesla primera vez que guardo por si necesito hacer más ajustes y luego, después de pensar que todo está bastante bien, lo guardo sin él (el aumento en el tamaño del archivo es bastante significativo, por lo que querrá hacer esto)
Sé que esto es muy tarde para el tema, pero tuve el mismo problema e hice lo siguiente.
Espero que esto ayude a alguien más.
width="<W>" height="<H>"su editor de texto favorito a la etiqueta SVG también ayuda (dónde <W>y <H>serían los números decimales).
Tuve un problema muy similar porque mi SVG creado por AI no estaba centrado y expandido a la ventana completa del navegador, porque AI cambia constantemente el tamaño de la mesa de trabajo y olvida el centrado.
La única forma de solucionarlo es tener un paso final de procesamiento manual en Inkscape.
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 iconos del mismo tamaño, este paso de procesamiento solo lleva 1 minuto, ya que siempre tengo el mismo lienzo y el mismo tamaño de objeto. Pero sí, es una lástima que este paso sea necesario y se debe solucionar en la IA.
He resuelto 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 cuando exportaba una imagen desde Illustrator (como muchos lo hacen) la mesa de trabajo no se incluye en el SVG exportado. Los caminos no tienen nada en lo que 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 altura. En CSS uso vwunidades, o simplemente viejas100% si el SVG es para llenar el espacio de 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 establecí la altura en 100px y dejé que el ancho se calculara automáticamente según la relación de aspecto. Luego ajusto la mesa de trabajo al logotipo para eliminar cualquier espacio no utilizado.
Seleccioné un rectángulo y activé el relleno y el trazo y me aseguré de que fuera exactamente del 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 los cálculos.
Para hacer esto en el código, parece que puede ajustar las rutas en ay rectestablecer su ancho y alto, y luego puede establecer viewBoxlo mismo (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 solucionarlo usando Inkscape . Parece que Illustrator tiene poca compatibilidad con archivos SVG.
