Some thoughts about displaying and sizing svg drawings.
- it seems not to be realistic to calculate width and heigth from the drawing itself. This is too complex. ImageMagick avoids this calculation too and relies completely on the width and height attributes in the svg tag.
- sample drawings which do not use width or height or set these attributes to 100% (what seems to be the same) are not serious svg documents
There are two possibilities to make smaler sizes from svg:
Method 1. drawing the svg in an object tag and simultaneously modify the svg source changing widht, height an introducing a viewBox if not present
Method 2. using ImageMagic to create jpeg preview pictures
If there was not the necessity of installing ImageMagick I would prefer method 2. If the svg drawing is reduced by code modification we must consider that svg drawings can be very complex so the browser has to render the complete drawing even if only a thumb is drawn. This is similar to a pixel graphic whose display size is reduced using width and height attributes within the img tag (but the complete amount of data for the full size has to be sent).
Method 1: Sizing the svg
To size an sgv drawing it is only necessary to change the attributes in the svg tag. width and height are simply what they say: the dimensions of the drawing in pixel (mm,cm,in,pt,pc,% are allowed) Additionally a viewBox can be defined. If it is defined then its rectangular dimensions map this area to the drawings size given in width an height. If a viewBox is not given then the coordinates of the drawing map to the picture area itself. A viewBox converts the coordinates of the drawing to the drawing area. If coordinates range from x:200..1000 and y:400..800 and the drawing should be width=400 height=200 then a viewBox="200 300 800 400" does exactly this job. ("x y width height").
For the sizing of an svg drawing this means: If viewBox is given, do not change it because it represents the area to be drawn. Simply change width an height to the desired value. If a viewBox is not given, insert one with the acutal values of width and height and after this step change width and height to the desired value.
Example: An svg drawing should be resized to a 200x100 area
drawing1: width="640" heigt="480" viewBox="40 30 500 250"
Change to: width="200" heigt="100" viewBox="40 30 500 250"
drawing2: width="640" heigt="480"
Change to: width="200" heigt="100" viewBox="0 0 640 480"
Example program getimage.aspx
Find attached the file getimage.aspx which follows this procedure. This program accepts a pixel image oder an svg drawing and displays it as an img tag or an obj tag would do. It accepts also width and height parameters which change the display size. command line:
f=<file name>
d=<path>
w=<newwidth>
h=<newheight>
If width and height in the svg drawing are not given they default to 1000.
http://localhost/getimg.aspx?f=sample1.svg // no changes are applied to the drawing
http://localhost/getimg.aspx?f=sample1.svg&w=400&h=200 // resize the drawing
http://localhost/getimg.aspx?f=sample2.svg&w=400&h=200 // resize the drawing
http://localhost/getimg.aspx?f=sample3.svg&w=400&h=200 // resize the drawing
Method 2: Making preview images using ImageMagick
How does ImageMagick treat the svg size?
Experiments with ImageMagick's "identify" command with sample.svg
width and height not given
identify sample.svg
0x0
width="200" height="200"
identify sample.svg
200x200
width="200in" height="200in"
identify sample.svg
14400x14400
width="200mm" height="200mm"
identify sample.svg
567x567
width="200" height="200" viewBox="0 0 400 400"
identify sample.svg
200x200
width="100%" height="100%"
identify sample.svg
1000x1000
width="50%" height="50%"
identify sample.svg
1000x1000
ImageMagic only looks at the width and height parameters. It correctly calculates the units. But it does not determine a size when "width" and "height" are not present. And a percentage size defaults always to 1000.
code sizing
convert sample.svg -resize 50% sample.jpg
convert sample1.svg -resize 50% sample1.jpg
convert sample2.svg -resize 50% sample2.jpg
convert sample3.svg -resize 50% sample3.jpg
Downloads
|