By Oct 25, 2018

Description:

Here we give some techniques for creating SVG images. We explain how to generate SVG images programmatically using different programming languages.

Preferencesoft

Useful SVG tools on Windows 10

Developers prefer to create their images in vector rather than matrix formats because their aspect is preserved in all scales. To create presentation images for software, advertising images, images for the Web etc. it is often necessary to reproduce the same image in several different sizes. But if we change the scale of a small bitmap image the rendering is not always satisfactory.

There are several vector image formats. For example:

  • Windows Metafile WMF and EMF formats
  • Adobe PS, EPS, PDF, AI formats (Adobe Illustrator)
  • The SVG (Scalable Vector Graphics) format of the W3C

SVG is an open source vector image format based on XML for the Web. Internet browsers have been slow to adopt it, but it is now supported by major browsers. Moreover, it is privileged by many open source software.

SVG Image Editors

The main vector image editors on Windows 10 are:

  • Inkscape (free and in the Microsoft Store)
  • Adobe illustrator (paid software)
  • CorelDRAW (paid software)
  • AutoCAD (paid software)

Inkscape software is a good tool for editing and creating SVG images and can be enough in most cases. It depends on the type of images to be made.

But any graphic design software requires a time of learning and handling.

Let's show a commonly used method for creating vector images quite quickly. A drawing made on a sheet of paper is scanned and the matrix image is converted into an SVG image with software. For a better result, you can import the scanned image into the software and draw on it with vector shapes.

Creating an SVG image programmatically

Even with drawing skills, it can be difficult to align geometric shapes and space them evenly apart. In some cases, it is easier to build regular geometric shapes that are repeated programmatically.

Some software can generate an SVG file from instructions. For example, we have Dpic that integrates a graphical language and allows us to create schemas, draw lines, draw shapes, and so on. To use Dpic, we will use the Windows Subsystem for Linux and call it from the command line with wsl.exe.

picture01.pic

.PS 
box wid 0.6 ht 0.6 shaded "purple" outlined "green" at 0,0
for i=-4 to 4 do { 
      box wid 0.1 ht 0.2 shaded "orange" outlined "green" at i*0.06,i*0.05 
}
box wid 0.1 ht 0.1 shaded "blue" outlined "green" at 0,0
.PE

In the Windows Shell, type the command: wsl.exe dpic -v picture01.pic > picture01.svg

squares

Another way is to use specialized libraries or modules to create SVG images and to generate images programmatically.

Such libraries exist for many languages ​​C#, Python, ...

We will use Python's PyX module which allows to draw 2D shapes in a canvas, to write text (in LaTeX), to generate EPS, SVG, PNG images by programming.

We will start by creating solid rectangles with the following Python script:

squares.py

from pyx import path, canvas, style, color, deco


c = canvas.canvas()
c.stroke(path.rect(0, 0, 50, 50), [style.linewidth.Thick])

for i in range(7, 45, 10):
    for j in range(7, 45, 10):
        p = path.path()
        p.append(path.moveto(i, j))
        p.append(path.lineto(i+5, j))
        p.append(path.lineto(i+5, j+5))
        p.append(path.lineto(i, j+5))
        p.append(path.closepath())
        c.stroke(p, [style.linewidth.Thick,
                     color.rgb.red,
                     deco.filled([color.rgb.green])])

c.writeEPSfile("building01")
c.writePDFfile("building01")
c.writeSVGfile("building01")

In the Windows Shell, type the command: wsl.exe python3 squares.py

squares

End with the creation of a text box containing LATEX instructions:

writing01.py

from pyx import *
unit.set(xscale=3)

tbox = text.text(0, 0, r"$\int$ Building $\int$")
tpath = tbox.bbox().enlarged(6*unit.x_pt).path()

c = canvas.canvas()
c.draw(tpath, [deco.filled([color.cmyk.Orange]), deco.stroked()])
c.insert(tbox, [color.rgb.white])
c.writeEPSfile("writing01")
c.writePDFfile("writing01")
c.writeSVGfile("writing01")

In the Windows Shell, type the command: wsl.exe python3 writing01.py

Text


Python

Categories

Share

Follow


KodFor Privacy Policy