font - ¿Cuáles son algunas opciones para optimizar SVG?

svg viewbox

Question

Tengo varios SVG, algunos de ellos bastante grandes (11 MB) y se crean a partir de un PDF utilizando pdf2svg .

El problema es que el SVG es demasiado grande, lleva mucho tiempo abrirlo y es innecesariamente complejo. Contiene principalmente texto y algunas imágenes (periódico de opinión), y el texto se divide en pequeños trozos de caracteres, ni siquiera palabras.

Necesito optimizarlo, primero para reducir el tamaño y también para reducir la cantidad de elementos para que se cargue más rápido. Lo único que pensé hasta ahora es mirar a los personajes que están en una línea, y unirlos en un solo <tspan> .

Esto debería reducir la cantidad de elementos de texto por un margen bastante significativo, porque parece que en su mayoría son grupos de 1-5 letras.

Pero estoy buscando más cosas que pueda hacer al SVG para reducir el tamaño. También hay una fuente principal, que se utiliza para aproximadamente el 95% del texto, pero tal como está ahora, todo el texto se define como glifos (formas representadas).

¿Es posible incrustar la fuente, por lo que el texto se representa como texto y no como formas?

Además, si conoce alguna biblioteca mejor para convertir archivos PDF a SVG, agradecería cualquier aporte. El único requisito es que la salida SVG se vea exactamente igual que el PDF.

También me gustaría señalar que la velocidad no es realmente importante. No importa cuánto tiempo lleve la conversión, siempre que produzca el resultado requerido.

Answer 1

Creo que tu SVG convertido probablemente esté muy hinchado de lo que podría ser. ¡No estoy seguro si Inkscape lo tomará! Hay opciones de menú como "Convertir a texto", pero estas no necesariamente funcionan.

Puede buscar y reemplazar en su archivo para eliminar las referencias a valores de atributo SVG predeterminados, como ... stroke: # 000000; ancho de carrera: 1px; stroke-linecap: butt; stroke-linejoin: mitre; stroke-opacity: 1; Muchos de ellos son predeterminados de todos modos, así que busca y reemplaza sin nada para eso.

También es sorprendente cómo se puede reducir la precisión innecesaria. En su conversión para ese archivo en particular, puede encontrar una terminación decimal .0000001 o .99999675 todas estas repeticiones también pueden ser eliminadas / reducidas

Answer 2

Puede ser que puedas usar un servicio web gratuito para eso.

Pruebe este sitio: https://online-converting.com/svg-optimizer/

Answer 3

Puedo recomendar Scour ya que lo he usado mucho para limpiar restos innecesarios de archivos SVG, que es algo así como un hobby mío.

Una línea de comandos de rastreo de ejemplo que podría servirle bien (y de la cual tiendo a partir):

scour --enable-viewboxing --create-groups --shorten-ids --enable-id-stripping --enable-comment-stripping --disable-embed-rasters --remove-metadata --strip-xml-prolog -p 9 < old.svg > new.svg

Asegúrese de comparar lo viejo con lo nuevo para asegurarse de que no arruinó nada y trate de reducir la precisión decimal -p (el valor predeterminado es 5 si no proporciona ninguno); en algún nivel, probablemente empiece a distorsionar las cosas bastante mal, pero uno o dos decimales más altos deberían verse bien.

Si desea adoptar un enfoque más manual, hay muchos trucos del oficio reunidos en los conjuntos de cambios de Kilobyte SVG Challenge , que son una especie de lugar combinado de aprendizaje y enseñanza para este tipo de cosas.

Sí, puede incrustar una fuente en el archivo SVG o vincular una externa, como lo demostró la visión de Mike Bostock sobre el logotipo de WebPlatform.org ( versión no incluida en html aquí ).

Por supuesto, es mucho más fácil lograr esto si tiene un conocimiento detallado de qué fuentes se utilizan que si elige un pdf arbitrario y lo convierte; No conozco ninguna herramienta que cree una fuente sin nombre a partir de los glifos del pdf original incrustado sin que usted haga la mayor parte (o la totalidad) del trabajo usted mismo.

Además, hay una lista creciente de herramientas de optimización de SVG en la sección Herramientas de Kilobyte SVG Challenge README .

Answer 4

Recientemente comencé a hacer un programa de Python para optimizar SVG, que puedes encontrar en: https://github.com/petercollingridge/SVG-Optimiser

Hay una versión en línea muy preliminar en: http://petercollingridge.appspot.com/

Con más información en: http://www.petercollingridge.co.uk/blog/svg-optimiser

Está lejos de ser completo y probablemente con muchos problemas, pero trata algunos de los problemas que mencionó Chasbeen, como eliminar la precisión innecesaria y los atributos de estilo predeterminados. También puede eliminar atributos innecesarios y espacios de nombres si sabe lo que está buscando, y convertirá los estilos a CSS, lo que hace que sea más fácil ver cómo podrían mejorarse.

Realmente no entiendo lo que quieres decir con la incrustación de fuentes. Si pega un fragmento de ejemplo del SVG que muestra los gyphs y los elementos de múltiples caracteres, podría incluir un método para combinarlos.

Answer 5

SVG-Cleaner parece funcionar perfectamente: mucho más rápido que otros, mejor compresión, robusto en mis pruebas, procesamiento de carpetas por lotes y ¡eh! un instalador de Windows para nosotros, gente perezosa!

Mi intento: Tamaño original del archivo: 241 KB, después de eliminar InkScape refs: 149K, limpiado con la herramienta: 38 KB, limpiado y comprimido: 5 KB (extensión de archivo .sgvz).

Intenté abrir el último, esperando un dibujo en blanco ... ¡Pero mis gráficos seguían intactos!

Descárguelo here (Windows, Ubuntu o Fuente)

Answer 6

Utilizando el programa de feedparser biblioteca de feedparser , que incluye la desinfección de SVG , escribí esta función que envuelve fastidiosamente svg en un único elemento de RSS para analizarlo.

import feedparser
def sanitize_svg(svg):
    feed = """<?xml version="1.0" encoding="UTF-8" ?><rss><channel><item><description>""" + svg + """</description></item></channel></rss>"""
    parsed = feedparser.parse(feed)
    return parsed.entries[0].description.encode(''utf-8'')

Aunque está hecho para incluir elementos de la lista blanca con la seguridad en mente, también reduce el tamaño del svg un poco.

Answer 7

https://github.com/svg/svgo

sudo npm install -g svgo

para optimizar todos los svgs en el directorio actual:

svgo -f .

Si no tiene npm, puede instalarlo en Ubuntu así:

sudo apt-get update && sudo apt-get install nodejs-legacy npm