Inkscape-Visual Code

En Visual Code podemos abrir dibujos creados en Inkscape. Visual Code los traduce automáticamente a lenguaje HTML. Vemos el proceso a continuación. 

Podemos dibujar programando, escribiendo directamente en lenguaje HTML, en aplicaciones de programación como Visual Studio Code, mediante etiquetas <svg> o <canvas>. Hay editores online como el que ofrece la página w3schools.

Pero podemos dibujar en aplicaciones de dibujo como Inkscape (o Corel, o Illustrator, o Indesign, etc, para dibujos vectoriales; Gimp, Photoshop, Paint etc para dibujos ráster) y luego ver el lenguaje html abriendo el archivo de dibujo en Visual Code.

El proceso es: Primero dibujar y luego programar. No escribirlo y luego verlo.

Primero en Inkscape:

• Configuramos la página (ancho, alto...).
• Dibujamos unas figuras: línea, rectángulo, círculo, elipse... (pulsando control se escala uniformemente; pulsando alt también, pero con centro en el lugar donde hemos pinchado).
• Botón derecho, propiedades del objeto:
• ID: sustituimos el nombre por defecto (rect4493) por el que queramos, pero sin acentos ni espacios, separando las palabras escribiendo la primera de cada una, con mayúsculas. Esto es el lenguaje "CamelCase" (es código JavaScript).

Guardamos el archivo como:

• Formato Inkscape (svg)
• Formato Plano
• Formato Optimizado
• Formato Dxf

Luego, en Visual Studio Code, instalamos el plugin que nos permitirá ver los resultados gráficos del lenguaje html.

• En el Visual Code, presionamos el icono Extensiones.

Buscamos el pluggin svg viewer y lo instalamos.

A continuación sale un botón para restaurar la sesión. Le damos. 

Abrimos los archivos que hemos creado en Inkscape.

Ahí podemos observar y comparar los códigos.

• Vemos que en el formato optimizado, se pierden datos importantes del archivo original, como la ID de los objetos.
• El formato dxf es demasiado largo.
• El formato Inkscape o el plano serían los más acertados para los archivos creados con Inkscape.

Podemos ver las formas gráficas, yendo al menú "ver", "paleta de comandos", escribimos "svg"y elegimos "svg viewer". Se abrirá una ventana, el visor gráfico.

Cualquier modificación que hagamos en Visual Code, se modificará en el visor y en el archivo original, automáticamente.