PI don't respect the viewBox dimensions in SVG images

[Andres.Pozo]

I don't know if this is a bug or a feature: I have generated a SVG image using the SVG object in Javascript. I used 2048x2048 as dimensions when the object was created. The resulting file has this at the start of the file:

Code: [Select]

<svg width="722.489mm" height="722.489mm"
 viewBox="0 0 2048 2048"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.2" baseProfile="tiny">

However when this archive is opened in Pixinsight the image is 2560x2560. I am using PI 1.8RC3 in Win7x64.

The SVG file is attached to this message.

[Andres.Pozo]

I think that I know where the problem is. When using the SVG component it doesn't clip the drawing primitives outside the viewBox. I have to do more tests but perhaps I can solve this setting a clipRect in the Graphics component when writing to the SVG.

[Juan Conejero]

What you say can be a partial cause of these problems. Besides that, I've found that Qt's SVG engine honors the width and height attributes of the svg element using an (implicit) default resolution of 90px per inch. I think that previous Qt versions behaved differently.

If you set the size, viewBox and resolution properties of the SVG object to invalid values, e.g.:

Code: [Select]

var svg = new SVG( "/path/to/file.svg" );
svg.viewBox = svg.size = new Rect( -1, -1 );
svg.resolution = -1;
then these attributes won't be included in the generated svg element. In this case the total size of your SVG drawing will be determined by the maximum extents of existing 'd' svg elements. Let's see if this works.

[Andres.Pozo]

A related question: What is the difference between the classes Graphics and VectorGraphics? Since I can use a SVG with Graphics, when I should use VectorGraphics instead?

[Juan Conejero]

Graphics uses 32-bit integer coordinates, while VectorGraphics uses 64-bit floating point coordinates. Other that this, and also a few differences in the way primitives are filled, both classes (and their corresponding JavaScript objects) are interchangeable.

In your case (AnnotateImage script? ) I think VectorGraphics can help you write cleaner code. It will save you the need to round all real coordinates to their nearest integers.

[Andres.Pozo]

Graphics uses 32-bit integer coordinates, while VectorGraphics uses 64-bit floating point coordinates. Other that this, and also a few differences in the way primitives are filled, both classes (and their corresponding JavaScript objects) are interchangeable.

In your case (AnnotateImage script? ) I think VectorGraphics can help you write cleaner code. It will save you the need to round all real coordinates to their nearest integers.

Ok. Thanks. It will test it.

[Andres.Pozo]

What you say can be a partial cause of these problems. Besides that, I've found that Qt's SVG engine honors the width and height attributes of the svg element using an (implicit) default resolution of 90px per inch. I think that previous Qt versions behaved differently.

If you set the size, viewBox and resolution properties of the SVG object to invalid values, e.g.:

Code: [Select]

var svg = new SVG( "/path/to/file.svg" );
svg.viewBox = svg.size = new Rect( -1, -1 );
svg.resolution = -1;
then these attributes won't be included in the generated svg element. In this case the total size of your SVG drawing will be determined by the maximum extents of existing 'd' svg elements. Let's see if this works.

The resolution can not be set to -1 so this trick doesn't work.

I have edited the SVG with a text editor and changed the width and height attributes to "2048px" instead of "722.489mm". Now PI sizes the window correctly.

Original header:

Code: [Select]

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="722.489mm" height="722.489mm"
 viewBox="0 0 2048 2048"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.2" baseProfile="tiny">
<title>PixInsight SVG Document</title>
<desc>Generated with PixInsight Core 01.08.00.0963 RC3 (x86_64)</desc>
[...]

New header:

Code: [Select]

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="2048px" height="2048px"
 viewBox="0 0 2048 2048"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.2" baseProfile="tiny">
<title>PixInsight SVG Document</title>
<desc>Generated with PixInsight Core 01.08.00.0963 RC3 (x86_64)</desc>
[...]

I don't know how to do this in Pixinsight.

If you want to test this, you can use the attached scripts.

[Juan Conejero]

Andrés,

Yes, there is indeed a bug in the SVG constructor. I already have fixed it in RC4. The correct workaround for RC3 is as follows:

* Create your SVG object without specifying the drawing dimensions.
* if necessary, set the viewBox property (a good idea if you can know the drawing boundaries in advance).
* Never set the drawing dimensions.
* The resolution property is irrelevant.

For example:

Code: [Select]

var svg = new SVG( "/path/to/file.svg" );
svg.viewBox = new Rect( 2048, 2048 );
In this way the width and height attributes of the svg element won't be written to the generated SVG file. Let me know if this works.

[Andres.Pozo]

Thanks Juan.

The SVG overlay now works ok in PI1.8RC3 

The version 1.4 of AnnotateImage has 3 changes:

• ARP catalog of galaxies
• Use of VectorGraphics object that allows using floating point coordinates
• SVG overlay

I think that it is ready for distributing it with PI1.8RC4

[Juan Conejero]

Wonderful!  8)