Usar inkscape para convertir dibujos en color escaneados a svg, ¿recomendado o no?

Su mejor enfoque para el tamaño del archivo, la calidad de la imagen y la flexibilidad probablemente sea un SVG con una imagen incrustada (o dos). Si ajusta el tamaño y la posición de todo (texto, imagen, elementos gráficos vectoriales) con el SVG y luego coloca un parámetro "viewBox" apropiado en él, el formato SVG se encargará de reducir el tamaño de las imágenes.

Si puede convertir con éxito (desde un gráfico y tamaño de archivo) el borde del dibujo lineal a una ruta SVG usando la técnica de @boblet, podría valer la pena, pero sospecho que encontrará que la evaluación de @Takkat de tamaño de archivo versus calidad es cierto para las imágenes en color.

Además, los dibujos de los bordes de las dos imágenes son casi iguales. Si usted y el artista están de acuerdo en hacerlos exactamente iguales, entonces podría reutilizar ese contenido en cada SVG, independientemente de si decide usar un formato vectorial o rasterizado. E incluso si elige un formato de trama, no tiene que ser el mismo formato que para las secciones coloreadas; puede usar JPEG a todo color para las inserciones y PNG monocromático con fondo transparente para el borde.

Su código svg se vería así:

<svg id="ch1-title-image" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMin meet">
   <defs>
      <desc>
          Chapter 1
          <!-- add some extra info for screen readers, since they won't
               know that the <text> below is styled like an <h2> heading -->
      </desc>
      <clipPath id="inset-ch1">
          <path d="<!-- define border of coloured area here -->"/> 
      </clipPath>
   <defs>

   <image xlink:href="images/Ch1.jpeg" 
          x="350" y="100" width="300" height="200"
          clip-path = "url(#inset-ch1)" />
   <!-- position and size the coloured image within the SVG,
        and crop it to shape, the image file will be scaled to fit
        this rectangle -->

   <image xlink:href="images/ChapterBorder.png"
         x="0" y="0" width="1000" height="500" />
   <!-- an <image> element also works if the border is saved as an SVG, but
        you could also use a <use> element (which would allow you to set CSS styles
        on the main file and have it inherited by the embedded file) -->

   <text x="500" y="400" text-anchor="middle" font-size="60">
       The Lamp in the Window
   </text>
</svg>

Para los otros capítulos, cambiaría la URL en el primero <image>, el contenido del texto y los idvalores. Desafortunadamente, debe repetir la ruta de recorte cada vez (a menos que esté seguro de que siempre será un archivo HTML largo) porque las referencias de la ruta de recorte siempre tienen que ser un fragmento dentro del mismo archivo , aunque podría usar un <use>elemento dentro para hacer referencia a la ruta en sí. Probablemente no valga la pena solicitar un archivo adicional por sí solo, pero sería óptimo si define el borde como un archivo SVG, luego podría tener una ruta dentro (incluso si es invisible) que define el borde del área coloreada:

<svg id="ch1-title-image" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMin meet">
   <defs>
      <desc>
          Chapter 1
      </desc>
      <clipPath id="inset-ch1">
          <use xlink:href="images/ChapterBorder.svg#inset-border"/> 
      </clipPath>
   <defs>

   <image xlink:href="images/Ch1.jpeg" 
          x="350" y="100" width="300" height="200"
          clip-path = "url(#inset-ch1)" />

   <use xlink:href="images/ChapterBorder.svg"
         x="0" y="0" width="1000" height="500" />

   <text x="500" y="400" text-anchor="middle" font-size="60">
       The Lamp in the Window
   </text>
</svg>

"inset-border" tendría que ser la identificación de un <path>elemento <g>dentro de "ChapterBorder.svg".

Dimensione el SVG usando CSS, asegurándose de configurar height:auto;. El texto y las imágenes se escalarán perfectamente. Consulte estas Preguntas y respuestas de StackOverflow para obtener más información sobre cómo obtener imágenes SVG a un tamaño receptivo .

Las ventajas de usar un archivo SVG trazado sobre una imagen de mapa de bits comprimida en formato JPEG dependen en gran medida de la complejidad del contenido.

Objetos simples

En caso de que tengamos pocos colores y objetos geométricos simples, una imagen vectorial trazada ganará claridad, será escalable sin perder mucha información y tendrá un tamaño más pequeño que el mapa de bits:

Fuente izquierda JPG de 7,2 kB. SVG trazado de 4,9 kB a la derecha

dibujos o fotos

Ahora esto será diferente para los dibujos a mano. El siguiente ejemplo muestra lo que se puede hacer con la configuración básica en la herramienta de seguimiento de Inkscape:

^{Mapa de bits Fuente: Wikimedia Max & Moritz}

Podemos ver que la imagen trazada es mejor cuantos más objetos escaneados creamos. Pero, por desgracia, el tamaño del archivo SVG con 64 escaneos no suavizados creció a 11,1 MB. Esto tiene mucho sentido teniendo en cuenta que el mapa de bits JPG tenía solo 141,9 kB de tamaño.

Aún así, el SVG suavizado de 6 escaneos bastante perdido tendrá el doble del tamaño del JPG de mapa de bits.

Solo si reducimos aún más la complejidad, podemos obtener un tamaño de archivo más pequeño que el que tenía el JPG. Pero esto puede no satisfacer realmente nuestras necesidades:

Traza simplificada izquierda de 102 kB con 5 escaneos. Derecha Mapa de bits comprimido JPG de 142 kB.

Combinación de vectores trazados y mapas de bits incrustados

Siempre que tengamos imágenes de origen que consisten en una combinación de dibujos lineales y dibujos en color, como en su ejemplo dado, es posible que deseemos separar estas partes.

1. Elimine las partes coloreadas de la imagen y reduzca los dibujos lineales a un mapa de bits solo en blanco y negro (aquí hecho con la selección libre de Gimp, luego Colors > Threshold ).

   

2. Guarde la parte de la imagen coloreada como un mapa de bits separado:

   

3. Traza el borde en blanco y negro con Inkscape ( Ruta > Trazar mapa de bits > 2 escaneos grises, sin optimización )

   
   Por encima del vector trazado, por debajo de la fuente de mapa de bits

4. Incruste el mapa de bits que guardamos en 2. en la imagen vectorial:

   

   Podemos ver ahora que al escalar el SVG también escalaremos el mapa de bits, lo que dará como resultado artefactos de bloque solo en la parte del mapa de bits:

   

Los tamaños de archivo resultantes de los pasos anteriores son los siguientes:

Source bitmap image PNG: 567.1 kB
Source bitmap image JPG:  89.2 kB (80% compression)
Vectorized Frame SVG:    176.6 kB
SVG with embedded PNG:   441.5 kB

Los procedimientos que se muestran arriba se pueden realizar en Inkscape con más o menos configuraciones predeterminadas, lo que no requiere mucho conocimiento en procesamiento de gráficos. Las partes difíciles son lograr el umbral para reducir los colores correctamente para no eliminar demasiado del dibujo y decidir cuánta simplificación necesitamos en la imagen vectorial trazada resultante.

Usar inkscape para convertir dibujos en color escaneados a svg: ¿recomendado o no?

Diría que, en general, calcar fotos o imágenes detalladas similares a las de una foto es muy, muy difícil de hacer bien, así que en realidad no. Pero claro, hay maneras...

Según la imagen que proporcionó, esto es lo que intentaría:

Los dibujos de líneas en blanco y negro deben ser lo suficientemente simples para rastrear. Pediría obtener escaneos de las partes coloreadas en la resolución más alta posible.

Trazaría las partes en blanco y negro y en color por separado . Hacerlos juntos traería demasiados elementos y compromisos.

Tenga en cuenta que estos ejemplos son de Illustrator y no soy un experto en Inkscape. Sin embargo; Inkscape debería tener aproximadamente las mismas habilidades.

Esta es parte de la imagen que proporcionaste:

Primero, lo llevaría todo a Photoshop/Gimp y me volvería loco con el contraste. El objetivo aquí es el blanco y negro, ignora el color por ahora. Alternativamente, puede hacer que escanee todo en blanco y negro de alto contraste.

Así que son bastante iguales. Para ser claros: sin rastrear a la izquierda, rastrear a la derecha:

Los colores están por todas partes y no como el original. Luego, volvería a trazar la misma imagen, a partir del original, pero esta vez solo considerando las partes coloreadas.

Al final, debe tener dos capas, donde una está optimizada en blanco y negro y otra con la parte coloreada optimizada.

Eliminaría el texto del dibujo, lo agregaría en Inkscape en una tercera capa como texto.

Los pasos exactos en Inkscape, por desgracia, no puedo decírtelo; pero la función de rastreo debería tener alternativas para alta fidelidad. Probablemente tendrá que jugar con él, pero se vuelve mucho más fácil cuando solo tiene que concentrarse en un elemento a la vez (es decir, en color o en blanco y negro).

¿Puede Inkscape hacer esto adecuadamente?

Sí, aunque depende del tipo de arte, por supuesto.

¿Qué tan compleja sería esta tarea para alguien que es bueno en software pero no necesariamente un artista?

La herramienta de seguimiento automático consiste básicamente en establecer variables y hacer clic en el botón. Por lo tanto, no es complejo, pero puede requerir un poco de prueba y error.

¿Tiene alguna sugerencia general sobre cómo hacer esto o alguna URL para recomendar? (Mi objetivo principal es la fidelidad a la imagen original).

Usa tus ojos. Configure el trazado automático para usar menos colores, menos puntos y vea cómo se ve. Si no se ajusta a su estándar, hágalo de nuevo con un poco más de colores y puntos. Repite hasta que te quede bien.

En ese momento, debe comparar el tamaño del archivo SVG con un JPG comparable.

La principal ventaja de los SVG en tabletas es que están basados ​​en vectores, no están sujetos a una resolución de pantalla en particular. Por lo tanto, recuerde comparar un JPG con una calidad de pantalla retina con el SVG para que sea una comparación justa.

ACTUALIZAR:

Acabo de ver que publicaste imágenes de muestra. Yo diría que aquí hay dos estilos. Uno es el arte lineal (el borde, el marco decorativo, etc.) y luego están las ilustraciones de tonos continuos dentro.

El primero es ideal para el seguimiento automático. Esto último será complicado.

En un mundo ideal/retrospectiva, sugeriría que tenga la ilustración interna también creada como arte lineal. Luego, se podría agregar cualquier color después del hecho en grandes franjas detrás de la línea de arte.