Wikiproyecto:Ilustración/Taller gráfico/Problemas típicos con SVG en Wikimedia

¿Has hecho una imagen que se veía bien en Inkscape pero al subirla a Commons se ve mal?

A diferencia de los formatos de imágenes de tipo raster (como PNG, JPEG, GIF), que describen el color de cada punto de la imagen, los formatos de imágenes vectoriales (como SVG) describen los objetos de la imagen. A partir del SVG se obtiene el color de cada punto de la imagen empleando un programa de «renderizado». Por ejemplo, en una imagen de tipo ráster, un texto negro estaría codificado de la forma «el pixel 2,3 es negro; y también el 2,4; el 3,3... y así hasta enumerar todos los píxeles negros», mientras que en SVG estaría codificado como «Hay un texto con el tipo de letra DejaVu Sans en negrita, con 12px de tamaño de letra que empieza en 2,3 y tiene un relleno sólido negro», y al renderizar se convertiría esta segunda descripción en la primera. Cuando en un artículo ponemos [[Imagen:blabla.SVG|thumb|300px]], MediaWiki renderiza el SVG para obtener una imagen de 300px. El software de render que emplea es librsvg

Aunque SVG es un estándar, hay tipos de objetos que no están soportados por según qué software de renderizado. También puede ser que en el caso del texto la computadora que renderiza no disponga del tipo de letra descrito en el SVG, y emplee otra en su lugar. La mayoría de problemas vienen por estas razones.

Consejos generales

Si tienes problemas con un SVG, descarga librsvg y convierte tu SVG a PNG en tu computadora. De esta forma podrás hacer las pruebas localmente y te resultará más rápido corregir el problema.

En Inkscape, guarda el SVG como "SVG plano". Esto hará que no se guarden datos innecesarios que en ocasiones pueden hacer que los thumbnails (las miniaturas que aparecen en los artículos) no se muestren correctamente.

Comprueba que tu SVG cumple el estándar.

¡El 8 está demasiado alto, aunque lo centré antes de subir la imagen!

El texto se desalinea, se modifica ligeramente, no se ve igual

Aquí tienes una lista de las fuentes de los servidores de Wikimedia. Procura emplear una de ellas. Si empleas una fuente de la que Mediawiki no dispone, usará otra en su lugar.

Otra forma de solucionar el problema es convertir el texto a trazo/trayecto (menú trazo/trayecto->objeto a trazo/trayecto). De esta forma en el fichero SVG el texto pasará a describirse como una figura más, y se representará siempre igual con independencia de la fuente que uses. La desventaja es que una vez convertido a trazo, el texto no se puede editar más como texto.

La imagen no se muestra

Suele ser por dos razones:

Porque hay una imagen raster

Si has incluido una imagen de mapa de bits (PNG, JPEG, GIF...) en el SVG, bórrala. A menos que la incrustes (Efectos->Imágenes->Incrustar todas las imágenes), lo que quedará descrito en el fichero SVG no será la imagen, sino que se indicará en qué carpeta y qué nombre de archivo tiene. Al tratar de representarla, Mediawiki buscará la imagen en la ruta que indica el SVG, como no podrá encontrarla, fallará y no podrá representarla. Por eso no se ve nada.

Porque hay objetos con relleno por patrones

El relleno con patrones es un misterio. A veces funciona, a veces no. Si has usado relleno con patrones y no se muestra la imagen, quítalo. En general procura no usarlo, porque da sorpresas desagradables.

Típico resultado de usar texto fluido

Aparecen rectángulos negros

Esto suele ser porque se ha insertado texto fluido. El texto fluido es el que se pone clickando y arrastrando el ratón para formar un recuadro en el que escribir. Esto siempre se ve mal. No lo uses. La única forma de incluir texto es la otra: clickar y escribir. Si abres el SVG con un editor de texto y hay objetos de tipo "flowRoot", quítalos todos. Se puede usar como editor el editor xml que hay en Editar->Editor XML.

También puedes convertir el texto fluido a trazo (menú trazo/trayecto->objeto a trazo/trayecto)