Wikipedia:Ayuda SVG

Ayuda SVG

Los gráficos vectoriales escalables son un formato de archivo que se utiliza habitualmente para proporcionar una descripción geométrica de una imagen mediante objetos básicos como etiquetas, círculos, líneas, curvas y polígonos. Una imagen se puede reducir o ampliar a un tamaño arbitrario y no sufrirá pérdida de datos de imagen ni se pixelará. SVG es un formato excelente para ilustraciones, diagramas y dibujos. Las imágenes SVG se definen en archivos de texto XML. Esto significa que se pueden buscar, indexar, codificar y comprimir. Dado que son archivos XML, las imágenes SVG se pueden editar con cualquier editor de texto, pero también hay programas de dibujo basados ​​en SVG disponibles.

Sin embargo, el motor de renderizado que utiliza Wiki no es perfecto y puede provocar que la imagen se muestre de forma incorrecta o distinta a como se muestra en el editor de vectores que elija . Esta página permite a los autores que experimentan problemas con gráficos SVG obtener ayuda para incluir sus imágenes en Wiki de la forma deseada.

Cosas en las que podemos ayudar

A continuación se incluye una lista de editores de vectores comunes y configuraciones sugeridas para compatibilidad. La guía del usuario del programa elegido también puede resultar útil para solucionar problemas.

La mayoría de los navegadores modernos pueden reproducir archivos SVG en modo de solo lectura. Puede resultar conveniente configurar un navegador como el visor de SVG predeterminado, pero también puede pegar la ruta del archivo en la barra de direcciones. Tenga en cuenta que, incluso si su navegador reproduce un SVG correctamente, puede reproducirlo de forma diferente en Wikipedia.

Los documentos SVG son archivos de texto y se pueden editar como cualquier otro archivo de texto. En concreto, los SVG son documentos XML , que tienen un soporte especial en muchos editores de texto. Una posible desventaja de editar los SVG a mano es que la vista previa de los cambios es más complicada. Una solución rudimentaria sería abrir el archivo SVG en un navegador mientras se trabaja en él y actualizar manualmente el documento para ver el resultado de los cambios.

Existe una solución sencilla para las limitaciones de librsvg. La operación "Trazar a trazado", que se encuentra en Menú>Trazado en Inkscape o mediante Ctrl+ Alt+ C, se puede aplicar a todos los objetos que no se renderizan correctamente. Para mantener los SVG editables, esto solo se debe hacer en los archivos que se van a cargar, y estos archivos se pueden eliminar después.

A partir de febrero de 2014, los objetos que deben modificarse para que librsvg los represente correctamente incluyen:

• Líneas con puntas de flecha (las flechas deben convertirse)
• Texto que ha sido transformado, p. ej. "Texto en ruta"
• Objetos compuestos creados con las herramientas de ruta binaria (unión, intersección, etc.)

Es posible que sea necesario modificar manualmente los archivos SVG de OpenOffice.org antes de subirlos a Wikipedia. Para lograrlo:

• Cambie todas las fuentes a las fuentes compatibles con Wikipedia como se mencionó anteriormente. (Por ejemplo, cambie "Sans incrustado" a "DejaVu Sans").
• Agregue "px" a todas las referencias de tamaño de fuente. (Por ejemplo, cambie "font-size:100" a "font-size:100px").
• Eliminar todas las referencias de coordenadas x adicionales en tspanlos elementos. (Por ejemplo, cambiar <tspan x="17583 17917 " y="10943">a <tspan x="17583" y="10943">.)
• [No requerido para OO 2.3.0] Colorear explícitamente todo el texto (por ejemplo, negro) reemplazando las instancias relevantes de "stroke:none;fill:none" con "stroke:none;fill:rgb(0,0,0)" (tenga en cuenta que simplemente colorear explícitamente el texto en negro en OpenOffice 3.2.1 no parece funcionar).

NB: Es posible que también sea necesario configurar explícitamente el ancho de línea de los gráficos vectoriales en OpenOffice.org Draw.

Este procedimiento de exportación SVG se ha probado utilizando OO 2.3.0 y OO 3.2.1 con un candidato .odg simple.

Es más fácil guardar diapositivas completas de Powerpoint como svg en lugar de guardar objetos seleccionados con un clic derecho o guardar como imagen, ya que en el caso de diapositivas completas, los bordes se recortarán al tamaño de la diapositiva y el fondo se establecerá en blanco. Para guardar diapositivas como svg, use archivo / guardar como / buscar / guardar como tipo --> svg.

Si la diapositiva tiene texto, abra el archivo SVG exportado en el Bloc de notas y reemplace todas las especificaciones de la familia de fuentes existentes por font-family="Liberation Sans,sans-serif". Esta especificación hará que Wikimedia represente las fuentes SVG de manera similar a cómo los navegadores representan las fuentes de Wikipedia.

El texto también puede cortarse al exportar, lo que provoca errores de representación y localización. Para solucionar esto, busque todas </text>las etiquetas y asegúrese de que la etiqueta no esté incrustada en otra etiqueta de texto que esté en la misma línea de texto. La mayoría de las etiquetas de texto incrustadas se pueden eliminar simplemente; sin embargo, si el contenido necesita ser subíndice o superíndice, reemplace la etiqueta de texto con una tspanespecificación. Para subíndices, use <tspan font-size="smaller" baseline-shift="sub">. Para superíndices, use <tspan font-size="smaller" baseline-shift="super">.

He cargado hojas de cálculo .xlsx (Microsoft Excel) que generan automáticamente código XML para gráficos en formato SVG.

Simplemente pegue o ingrese sus datos en la hoja de cálculo y especifique las dimensiones de la imagen, la cantidad de líneas de la cuadrícula, los tamaños de fuente, etc. La hoja de cálculo genera instantánea y automáticamente una columna de código XML que simplemente copia y pega en un editor de texto y guarda como un archivo ".svg". Las hojas de cálculo producen código SVG simple, evitando el "material adicional" que inserta Inkscape. Deberían ahorrarle tiempo al crear gráficos SVG.

Los comentarios y sugerencias en mi página de discusión son bienvenidos. RCraig09 ( discusión ) 23:41 19 feb 2021 (UTC) [ responder ]

Haga clic en CÓMO para obtener una explicación detallada.

Haga clic AQUÍ (o AQUÍ) para descargar las hojas de cálculo.

Archivos SVG de ejemplo: Categoría:Diagramas SVG creados con hojas de cálculo.

1. Rayas de calentamiento : acepta un único conjunto de datos y lo convierte en código SVG que representa los gráficos de rayas de calentamiento de Ed Hawkins . El usuario elige rayas verticales u horizontales; orden de datos normal o inverso; o entre una variedad de formas geométricas (actualizado el 17 de mayo de 2023). . . . . Haga clic aquí para ver ejemplos de rayas de calentamiento incrustadas en diferentes formas.
2. Gráfico de barras con franjas de calentamiento : acepta un único conjunto de datos y crea un gráfico de barras convencional cuyas barras/columnas individuales están coloreadas según el esquema de colores de franjas de calentamiento del Dr. Hawkins. Opción alternativa: elija un color para las barras ascendentes y otro color para las descendentes. (actualizado el 28 de agosto de 2023)
3. Gráficos de líneas : acepta hasta seis conjuntos de datos. (actualizado el 30 de agosto de 2023)
4. Gráficos de barras verticales (gráficos de columnas) : acepta hasta seis conjuntos de datos. Alterna entre gráficos agrupados y apilados; el usuario puede ajustar el "nivel Y", el nivel Y (normalmente = 0) desde el que las columnas suben o bajan; el usuario elige mantener o ignorar los valores de entrada negativos. (actualizado el 27 de agosto de 2023)
5. Gráficos de barras horizontales : acepta hasta seis conjuntos de datos. Alterna entre gráficos agrupados y apilados; el usuario puede ajustar "Yfloor", el valor (normalmente = 0) a partir del cual se extienden las barras; el usuario elige mantener o ignorar los valores de entrada negativos. (actualizado el 27 de agosto de 2023)
6. Diagramas de dispersión : acepta hasta cinco conjuntos de datos. (actualizado el 28 de agosto de 2023)
7. Gráficos circulares : acepta un único conjunto de datos de hasta 36 elementos. (actualizado el 17 de mayo de 2023)
8. Gráficos de barras de ancho variable : aceptan hasta seis conjuntos de datos; son como los "Gráficos de barras verticales" mencionados anteriormente, pero el usuario puede elegir diferentes anchos para las distintas barras. (actualizado el 27 de agosto de 2023)

La conversión de texto de un archivo SVG en rutas (formas) aumenta el tamaño del archivo, impide las funciones de localización y accesibilidad y complica las ediciones y modificaciones posteriores. Por lo tanto, no suele recomendarse, con algunas excepciones, como los logotipos basados ​​en texto. El renderizador de texto de Wikimedia puede introducir errores, ya que sus fuentes pueden diferir de las fuentes del navegador o de las fuentes del editor SVG, pero seguir las instrucciones a continuación debería minimizar estos errores.

Debido a restricciones de derechos de autor, MediaWiki no puede utilizar fuentes propietarias que se encuentran comúnmente en varios sistemas operativos propietarios. Las fuentes como Geneva requieren el pago de una licencia para su distribución. rsvg no podrá localizar dichas fuentes y el texto no aparecerá en la imagen renderizada. Existen tres soluciones para este problema:

• Se puede sustituir una fuente que esté disponible en Wikipedia. Este enfoque facilita la edición.
• Se puede especificar un genérico font-familycomo "sans-serif", "serif" o "monospace", pero esto puede generar una representación inconsistente. Es mejor especificar una fuente disponible en Wikipedia (como Liberation Sans) con fuentes de respaldo como: font-family="Liberation Sans,Arial,Helvetica,sans-serif", en la que se define una lista de fuentes con fuentes similares que al menos contienen una fuente para cada sistema operativo, como Wikimedia (por ejemplo, Liberation Sans), Windows (por ejemplo, Arial), Linux (por ejemplo, Liberation Sans), Mac (por ejemplo, Helvetica).
• Dado que la representación local debe ser lo más parecida posible a Wikipedia, debería utilizar localmente la misma fuente que tendrá en Wikipedia, si está disponible. Por lo tanto, siempre defina primero una fuente Wikimedia. Además, Wikimedia tiene sinónimos para sustituir fuentes, como "Arial" por "Liberation Sans"; por lo tanto, font-family="Arial,DejaVu Sans"se representará como "Liberation Sans" y no (como se esperaba) como "DejaVu Sans". (Esto se debe a que "Liberation Sans" tiene el mismo tamaño de letra que "Arial" [compatible con el sistema métrico], por lo que es menos probable que estropee el flujo del texto).
• Agrupe el texto, cree una copia y convierta la copia en rutas. Luego:
  1. Mueva el texto original editable que no es de ruta a una capa de texto editable separada que haga transparente (advertencia: los optimizadores SVG pueden eliminar esto), o
  2. Mueva el texto original, editable y sin ruta fuera del área visible (ejemplo: Archivo:Essigsäuresynthesen.svg ).

Para facilitar la edición posterior y reducir considerablemente el tamaño de los archivos, se recomienda sustituir la fuente por una fuente disponible. Muchas fuentes comunes tienen alternativas no propietarias que son similares en estilo tipográfico, lo que produce una alteración mínima de las imágenes existentes durante la sustitución. Para obtener una lista de las fuentes disponibles en Wikipedia, consulte las fuentes disponibles en Meta.

Wikimedia tiene fuentes predeterminadas y utilizará Liberation Serif para Times New Roman y Liberation Sans para Arial . Para obtener más opciones alternativas, consulte c:Help:SVG#fallback.

Las fuentes que están disponibles en los servidores de Wikimedia pueden o no estar disponibles en la máquina del visitante. Si la ubicación o apariencia del texto en la imagen es importante y no se sabe con certeza qué fuentes están instaladas en la máquina del visitante, puede ser necesario convertir el texto en información de ruta.

Las fuentes deben tener un tamaño adecuado para que se vean bien como miniaturas en las páginas de Wikipedia y sean fáciles de ver en los teléfonos inteligentes. Los teléfonos inteligentes son el medio por el que la mayoría de las personas acceden a Wikipedia. Las miniaturas son el medio por el que la mayoría de las personas ven las imágenes, ya que muy pocas personas hacen clic en las imágenes y las amplían para verlas. Evite usar o crear imágenes con fuentes que sean demasiado pequeñas para ser legibles en las vistas en miniatura o en los teléfonos inteligentes.

El tamaño de fuente que aparece en una miniatura es una combinación del ancho del svg, el ancho de la miniatura y el tamaño de fuente. Para que el tamaño de fuente de Wikipedia coincida con el de una miniatura, utilice font-size = (63/(su valor vertical))*((su ​​ancho de svg)/1000). Por ejemplo, si la miniatura se ampliará a un valor vertical de 1,35 y su imagen tiene un ancho de svg de 960, configure font-size en el svg como (63/1,35)*(960/1000) = 44,8.

Los fondos transparentes están bien, pero no creas que tu imagen siempre se mostrará sobre un fondo claro o blanco. La aplicación para smartphones de Wikipedia, por ejemplo, muestra las imágenes sobre un fondo negro, por lo que si muestras texto negro sobre un fondo transparente, será invisible.

Los siguientes verificadores SVG pueden ayudarle a detectar problemas SVG antes de cargarlos:

• Comprobación de SVG de WMF Labs
• Comprobador de SVG de Commons
• Validador de w3.org

Ninguno de estos comprobadores es infalible, por lo que es recomendable validar las imágenes. Puede validar las imágenes de manera preliminar subiéndolas a la ubicación compartida de uso temporal Test.svg, aunque otros usuarios pueden sobrescribir su imagen en cualquier momento.

Para forzar la actualización de las imágenes en su navegador, utilice Ctrl+F5 (Shift-Recargar en Mac), de modo que vea la última carga y no las copias de imágenes almacenadas en caché (esto es necesario incluso en las páginas de carga de wikimedia).

En Wikipedia, la biblioteca librsvg interpreta los SVG para crear vistas previas de PNG en distintos tamaños de imagen (para rasterizarlos ). Esa biblioteca solo reconoce un subconjunto de toda la sintaxis SVG válida y puede representar su SVG sin muchas funciones.

Para evitar estas deficiencias en la biblioteca, hay ciertos parámetros que deben formatearse de maneras específicas o a los que se les debe asignar un valor alternativo para que librsvg represente con precisión las vistas de su archivo SVG. A continuación se enumeran algunos problemas, pero asegúrese de probar sus archivos SVG antes y después de cargarlos.

La biblioteca librsvg no interpreta correctamente el valor de "userSpaceOnUse"para el parámetro maskUnits. Para evitar este problema, reemplácelo maskUnits="userSpaceOnUse"por maskUnits="-10% -10% 120% 120%"y la máscara SVG se mostrará correctamente en Wikipedia.

La biblioteca librsvg no acepta un stroke-dasharrayparámetro con valores separados por espacios. Reemplace todos los espacios con comas para evitar este problema:
Ejemplo: reemplace stroke-dasharray="2 3 2 4"constroke-dasharray="2,3,2,4"

xlink:hrefquedó obsoleto y fue reemplazado por hrefSVG 2, lanzado en 2018. Entre 2023 y 2024, el renderizador SVG de Wikimedia se actualizó para seguir su ejemplo, por lo que xlink:hrefya no funciona. En su lugar, hrefahora debería usarse.

http://w3.org/TR/css-syntax-3 establece que "los nombres de propiedades y los nombres de reglas son siempre identificadores, que deben comenzar con una letra o un guión..."

Lamentablemente, el último creador de imágenes en miniatura (llamado rsvg ) tiene un error que desalinea las etiquetas de texto alineadas al centro o a la derecha que contienen etiquetas tspan en la misma línea.

Mientras los desarrolladores trabajan en una solución, aquí hay algunas soluciones para disminuir la utilidad:

1. Alinee a la izquierda textlas etiquetas afectadas context-anchor="start"
2. Especifique el atributo yo para las etiquetas dyafectadastspan
3. Si se utilizan varias tspanetiquetas en una línea para:
   • Espaciado entre palabras y caracteres, utilice:
     1.  (espacio indivisible),  (espacio fino) y/o  (espacio de pelo) caracteres
     2. El letter-spacingatributo
     3. una fuente monoespaciada como Liberation Mono(último recurso)
   • subíndices o superíndices, utilice subíndices y superíndices Unicode
   • Para poner variables en negrita o cursiva, etc. en matemáticas, utilice símbolos alfanuméricos matemáticos Unicode
4. Fusionar tspanlas etiquetas afectadas, incluso las variables sin cursiva, etc., si los métodos anteriores fallan
5. Convertir texto en formas (último recurso, ya que el texto ya no se puede modificar, copiar ni leer con lectores de pantalla)

Si aparece un cuadro negro, lea c:User:JoKalliauer/RepairFlowRoot para saber cómo solucionar este problema, pero no elimine esos objetos, ya que podrían contener texto. Las soluciones alternativas que se pueden emplear son no utilizar texto fluido (utilizando la herramienta de texto sin crear un campo de texto) o convertir el texto en texto normal (mediante el editor de texto o el comando sed, o con la interfaz gráfica de usuario de Inkscape o con un lote de Inkscape), sino trazar el texto utilizando "objeto a ruta", ya que no se recomienda utilizar la ruta de texto y aumenta el tamaño del archivo.

Cuando se incrusta un gráfico rasterizado en un SVG, se codifica en datos base64 . A esos datos se les asigna un tipo MIME en el elemento <image>. En el caso de un JPEG incrustado, el tipo MIME es "image/jpeg". Las versiones anteriores de Inkscape (y posiblemente otros editores) asignaban el tipo MIME "image/jpg". Si bien Inkscape y la mayoría de los navegadores web mostrarán una imagen SVG de este tipo sin problemas, el software MediaWiki que rasteriza el archivo SVG tendrá problemas con él. Al no reconocer el tipo MIME "image/jpg", simplemente habrá un espacio vacío donde se supone que debería estar la imagen. La solución es abrir el archivo SVG en un editor de texto, buscar el elemento <image>, ubicar "image/jpg", cambiarlo a "image/jpeg" y volver a guardarlo. A la derecha hay un ejemplo de este problema. El verificador de SVG de Commons busca este problema; consulte Commons:Commons:Commons SVG Checker/KnownBugs#Checks para obtener más detalles.

Aunque los navegadores web admiten etiquetas de imágenes sin ancho ni alto especificados, librsvg ignora dichas imágenes.

Se pueden encontrar más problemas en c:Librsvg_bugs o en Commons:Commons:Commons SVG Checker/KnownBugs, y se pueden encontrar ejemplos en c:Category:Pictures_demonstrating_a_librsvg_bug. Sin embargo, la mayoría de los problemas (para archivos de <1 MB) se pueden solucionar utilizando https://svgworkaroundbot.toolforge.org/ (habilita "run svgcleaner" y habilita "run scour" antes de hacer clic en convertir), para obtener una lista más detallada, consulta c:User:SVGWorkaroundBot.