illustrator formato examples svg

formato - svg illustrator



SVG y DPI, unidades absolutas y unidades de usuario: Inkscape vs. Firefox vs. ImageMagick (2)

Intento generar automáticamente un archivo SVG destinado a imprimirse en un tamaño determinado (A4). Deseo usar un camino en él, que solo permita ''unidades de usuario'', no ''unidades absolutas''.

Me parece que es imposible ''publicar'' un archivo SVG que tenga unidades absolutas (por ejemplo, el tamaño del documento) y una ruta en cualquier lugar , porque no puedo hacer que funcione correctamente en todos los visores.

¿Hay alguna manera de obtener cierta consistencia en la representación, como especificar un "DPI predeterminado"?

O dicho de otra manera: ¿Puedo obtener mi ejemplo a continuación para mostrar lo mismo en todos los espectadores sin abandonar unidades absolutas en absoluto?

Relacionado: ¿Hay alguna manera de forzar cualquiera de las aplicaciones siguientes para representar la imagen de la misma manera que una de las otras? (Por ejemplo, probé la opción -density de ''convertir'', pero no pude conseguir que la salida coincidiera con la salida de Inkscape o Firefox).

Ejemplo:

Creé un archivo SVG, con tres cuadrados negros (rect) con una diagonal roja (ruta):

  • Izquierda: cuadrado y diagonal en unidades de usuario
  • Medio: cuadrado y diagonal en pulgadas (me pareció la opción más lógica, pero no está permitida)
  • Derecha: cuadrado en mm, diagonal en unidades de usuario

Que rinde de manera diferente en diferentes espectadores:

  • Inkscape: 90 DPI, todos los cuadrados del mismo tamaño, diagonales rojas
  • Firefox: 96 DPI ?, cuadrados posteriores a grande (o diagonal a corto)
  • Convierta: 72 DPI, los últimos cuadrados a pequeño (o diagonal a largo)

Code :

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="200mm" height="100mm" > <g transform="translate(50,50)"> <rect width="100." height="100." x="10" y="10" /> <path style="stroke: #ff0000" d="M 10 10 L 110 110" /> </g> <g transform="translate(200,50)"> <rect width="1.111in" height="1.111in" x="0.1111in" y="0.1111in" /> <path style="stroke: #ff0000" d="M 0.1111in 0.1111in L 1.111in 1.111in" /> </g> <g transform="translate(350,50)"> <rect width="1.111in" height="1.111in" x="0.1111in" y="0.1111in" /> <path style="stroke: #ff0000" d="M 10 10 L 110 110" /> </g> </svg>

Inkscape (mi ''espectador'' predeterminado):

Firefox (tenga en cuenta que la línea roja no llega a la esquina inferior derecha. Hice una captura de pantalla y recorté algo de forma arbitraria):

ImageMagick (convertir, no hay opciones además de los nombres de archivo dados):


He tenido un problema similar al usar Apache Batik para incrustar un archivo SVG en un archivo PDF usando iText . iText usa 72 DPI, el estándar para PDF, mientras que Batik usa 96.

Para que la imagen aparezca correctamente, es decir, para escalar, en el archivo PDF, debe dividir el ancho = x cm altura = y cm en el encabezado SVG por 1.33 (96/72).


Todas las dimensiones en una etiqueta de ruta están en unidades de usuario.

No puede especificar unidades absolutas dentro de una etiqueta de ruta , por lo que la ruta en el cuadro central no se procesa.

La forma más sencilla que he encontrado es configurar las unidades usando Viewbox :

  • Establezca el ancho y alto en pulgadas.
  • Luego configure el viewbox para que sea el mismo.
  • Esto establece que la unidad de usuario sea de una pulgada.
  • Todos los tamaños se especifican en pulgadas (nota: utilicé minúscula l en la etiqueta de ruta para especificar un movimiento relativo)

Esto se muestra correctamente en Inkscape y Firefox.

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="8in" height="4in" viewBox="0 0 8 4"> <g transform="translate(4,0.5)"> <rect width="1.111" height="1.111" x="0.1111" y="0.1111" /> <path d="M 0.1111,0.1111 l 1.111 1.111" style="stroke: #ff0000;stroke-width:0.01" /> </g> </svg>