|
|
|
Bitmap images: conversion to SVG
(Test report part 1)
Here I show how to insert bitmaps into SVG files and
above all, how to export them to the SVG format.
|
Images
Latest update: 06.04.2003
|
|
|
| |
Note: In the first place it is not the actual purpose of SVG to convert raster images into it. It is only an option.
Test: KVEC 2.75 | fds for SVGs | CR2V | Illustrator 10
|
| |
Test report part 2: Vector Eye »»»
|
 |
Displaying bitmaps in SVG files
|
| |
This JPG called "sky.jpg" has been inserted into an SVG file via xlink:
 
This will also work with a PNG.
|
|
Converting bitmaps to SVG |
| |
Converting bitmaps (raster images) like JPGs, BMPs, GIFs... to SVG
With efficient and commercial programmes like Adobe Illustrator 10 and Corel Draw 10
you can draw vector graphics and export them to the SVG format.
However, I wanted to check what the results are like when trying to convert bitmap images to the SVG format.
For this reason I first tested three of the right now available free or non-expensive tools (KVEC, fds for SVG, CR2V).
Later I also tested Adobe Illustrator 10 concerning this feature.
 gzip (free, all systems)
In the beginning an important tip: you can compress SVG files substantially, either by using gzip or by using the Adobe SVG Viewer 3. The compressed files have the suffix .svgz and can be read by the viewer. You will see in many of the examples below how much filesize this will save you.
KVEC 2.75 (shareware, 25 US$, all systems)
If you don't mind working in the command line (like the MS-DOS command line), you can use KVEC to convert several raster formats (BMP, GIF, JPG, TIFF,...) into various vector formats - amongst them SVG.
I used a GIF and a JPG for my test:
|
8 KB as .gif |
|
171 KB as .svg
26 KB as .svgz
This image is, sure, only a screenshot of the zipped (compressed) SVG
|
As you can see the result is not too convincing. Apart from that the filesize is a problem, too (at least for the use in the internet). Even the compressed version of the converted image is much bigger than the original.
Similar result with the next example:
|
16 KB as .jpg
67 KB without compression
|
|
541 KB as .svg
78 KB as .svgz |
At the end of the next software test there will be a further example for KVEC.
fds for SVG 0.1 (Windows, free)
This little tool (zipped 21 KB!!) really converts bitmaps to SVG, mind you with some ;-) restrictions, which are pointed out on the developer's page.
1. It only works with 8-bit Windows bitmaps.
2. The original has to be smaller than 600x600.
3. Images with many colours will experience an interesting but unwanted change after conversion.
Nevertheless I chose a picture, which is not suitable at all according to advice number 3:
|
21 KB:
I once painted this terribly kitschy image when I received many watercolours as a present and wanted to find out, how to paint with them (as you can see, it was a good decision to stop producing non-digital art).
Well, the original image is very large, the paper extremely wavy and there are loads of colours and details. Too much of them.
|
 |
14 KB:
This is why I strongly minimized the scanned image and used the Photoshop filter "Cutout" in order to reduce the number of details and colours.
Then I made an 8 bit BMP screenshot from the result, which had a size of 33 KB.
This one I converted to SVG using "fds for SVG". The result is an SVG file with the size of 81 KB, which I could reduce to 26 KB using gzip.
|
 |
26 KB:
The conversion has led to the before mentioned change, inspite of the fact that I have "simplified" the original.
The picture on the left is, sure, only a screenshot (10 KB) of the result. If you want to see the SVG version, please click on the picture.
|
By the way, before I had "simplified" the original as described above, after conversion using "fds for SVG" I only got to see a few coloured spots, which even with unlimited imaginative capabilities could not have been interpreted as a bunch of flowers in a vase.
As opposed to this KVEC (see above) produced a much more acceptable result with this particular image. I did not even have to "simplify" the original:
|
21 KB as .gif |
|
239 KB as .svg
38 KB as .svgz
|
CR2V Celinea Raster to Vector converter (free, Windows)
I like most CR2V. Here, too, you have to enter the conversion commands into the command line. Here are the result with the same originals:
|
8 KB as .gif |
|
12 KB as .svg
4 KB as .svgz
|
|
16 KB as .jpg
67 KB without compression
|
|
54 KB as .svg
17 KB as .svgz |
|
21 KB as .gif |
|
34 KB as .svg
10 KB as .svgz
|
CR2V's files have a much lower filesize than those of the before tested programmes, but you possibly might not like the new character/style of the converted images. I, however, love the results, above all the parrot :-)
With the two programmes KVEC and CR2V I always chose the fastest way, which means I did not define individual parameters for the conversion, I did not change (simplify) the originals and also did not apply changes to the final results (e.g. by optimizing them in WebDraw).
With a little more time and effort one could achieve a smaller filesize and better results. Here you saw the results of the least time spent.
News April 2003: CR2V is not available any more :-(
Now there only is the follow-up software "Vector Eye"
see test report on the next page »»».
Conclusion up to now (for KVEC, fds for SVG, CR2V):
If you don't want to accept those mentioned changes to your images, I recommend not to convert your images but to insert them into your SVG file via x:link (as described on top of this page).
If you, however, like those changes with single examples, I recommend to use CR2V for conversion, since this software produces the smallest filesize. Apart from that I do like the new character of the converted images. This is, however, a question of taste and also depends on the respective original.
Adobe Illustrator 10: (about 500 Euro, Windows and Mac)
Months later: In the meantime I have bought Illustrator 10 and have opened the parrot with it and then saved it as .svgz. The result is an 18 KB big file, which exactly looks like the original (see above, left column). This is great :-)
There is only one disadvantage (which can be acceptable depending on the aimed use of the image): If you zoom into the result, it becomes more and more blurred (as opposed to the CR2V- or KVEC-parrot). It does, though, not become as unsightly (which is: pixely) as a zoomed JPG.
A JPG which has been converted to the SVG format with Illustrator 10, zoomed:
|
 |
| Zoomed JPG: |
 |
The upper result is much more acceptable, isn't it?
However, if your complete file is not meant to be zoomed by anyone anyway,
I recommend Illustrator 10 for conversion from bitmap to SVG.
Important note:
In order to get a similarly small resulting file (as in this example) using Illustrator 10 you have to observe the following hints when converting:
- Open the image, e.g. a JPG, with Illustrator 10
- Go to "File - Save as" and choose:
"Compressed SVG (*.svgz)", then click on "Save"
- An option window pops up. In there you turn off
"Preserve Illustrator Editing"
- Then click on "Advanced". There you only choose:
"Optimize for Adobe SVG Viewer". Turn all other checkboxes off.
This is how my 16 KB original JPG has become an 18 KB SVG file. If you don't follow these steps, the resulting file will become much larger.
Conclusion all together:
If you already have Illustrator 10 (because it is a gorgeous vector graphics tool), I would advise to choose it for the conversion of a bitmap to SVG. If you, however, don't want to spent your money on it, I recommend the free CR2V.
Additional remark:
If you, however, intend to animate parts of the converted SVG file, you will have to go for CR2V. For example I could recognize, isolate and animate the paths which form the beak of the parrot,
as you can see in the oasis.
Illustrator on the other hand did not really vectorize the parrot image (but 64-base encoded it), therefore single paths could not be recognized and isolated.
Perhaps I will find the time to explain this in details and to show, how single paths in an SVG file can be animated.
Attention!
Since January 2003 there is a follow-up software for CR2V.
See my test report for Vector Eye on the next page »»»
|
|
kukofka@scale-a-vector.de
