Welcome Guest! To enable all features please Login or Register.

Notification

Icon
Error
svg-images produce errors
Options
Previous Topic Next Topic
ffiala
#1 Posted : Wednesday, 6 July 2011 11:46:24 PM(UTC)
ffiala

Rank: Member

Joined: 8/11/2010(UTC)
Posts: 14
Location: Vienna, Austria
Although the svg vector format is in the list of media object, this format produces errors when the album containing an svg image is displayed.

When looking at the album a broken link image is displayed.

When looking at the picture, the message "Your browser cannot display this media object, but you can download it by clicking the download link in the toolbar." (The browser is capable of displaying svg.)

The (head of the) error message is:
This error report was generated by Gallery Server Pro.
Error: Unsupported image: the file Postkarte.svg cannot be loaded into the .NET Framework's System.Drawing.Bitmap class. This is probably because it is corrupted, not an image supported by the .NET Framework, or the server does not have enough memory to process the image.

Svg cannot be displayed using the img tag. But in another application it was possible to show svg images inline using the following code:
<object type="image/svg+xml" data="test.svg"><param name="autoStart" value="False">Your browser cant show the object test.svg</object>

I am using the dotnetnuke version of GalleryServerPro (2.4.8) but this behaviour seems not to depend on this.
Back to top
WWW
Roger Martin
#2 Posted : Thursday, 7 July 2011 8:57:13 AM(UTC)
Roger Martin

Rank: Administration

Joined: 3/08/2007(UTC)
Posts: 3,300
Location: Fort Atkinson, WI
I spent some time looking at this and have a few observations:

* A bug in GSP is causing the broken thumbnail image for SVG files. I'll fix that in the next release.

* I looked at adding support for displaying SVG files using the sample you provided. There are a few issues to work through, and they all seem solvable except for one. Consider a sample HTML page:

Code:
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
<body>
 <object type="image/svg+xml" data="sample.svg"><param name="autoStart" value="False">Your browser cannot display the object.</object>
</body>
</html>


An attached HTML file, along with a SVG file, demonstrates the issue. If you copy the two files to a directory and then open the HTML page in IE9, notice the ellipse is partially hidden. IE seems to create a default box 150px high, but the image requires more than that.

I tried modifying the tag to force a 100% width and height:

Code:
<object type="image/svg+xml" data="sample.svg" style="width:100%;height:100%;"><param name="autoStart" value="False">Your browser cannot display the object.</object>


But the image is still cut off. Finally, I tried an explicit width and height:

Code:
<object type="image/svg+xml" data="sample.svg" style="width:500px;height:500px;"><param name="autoStart" value="False">Your browser cannot display the object.</object>


Success! The full ellipse is visible. But...that means GSP has to explicitly specify a width and height for SVG files, and it has no way to know what those dimensions are. It is not practical to use an arbitrarily large width and height because that pushes other content off the page, and it is also not convenient to ask users to manually enter a width and height for each object.

Firefox and Chrome show the same behavior.

I think there must be a solution to this, but I am not sure what that is, so I would love your feedback. It may be possible to use a 3rd party utility like ImageMagick to discover the width and height, but that requires an extra installation step and full trust.
File Attachment(s):
svg_test.zip (1kb) downloaded 2 time(s).
Roger Martin
Creator and Lead Developer of Gallery Server Pro
Back to top
WWW
ffiala
#3 Posted : Thursday, 7 July 2011 1:44:58 PM(UTC)
ffiala

Rank: Member

Joined: 8/11/2010(UTC)
Posts: 14
Location: Vienna, Austria
It seems that the object tag needs some height information else its height defaults to about 150px and cuts the drawing.

All my svg files have absolute settings of width and height so as a first approach I would try to determine the size of the svg drawing searching for something like "
Code:
<svg...width="www"...height="hhh"...>
after reading the file content.

If absolute width and height parameters can be found, the drawing can be scaled by introducing a transform attribute in a group around the rest of the drawing:

With Your example and an outer (object) size of 600, 600 and an inner (svg) size of 300, 300 the html changes to:

Code:
<table border="1" width="600" height="600"><tr><td>
<object type="image/svg+xml" width="600" height="600" data="sample.svg"><param name="autoStart" value="False">Your browser cannot display the object.</object>
</td></tr></table>

The table makes the borders of the object visible.

And the svg changes to (scale=outer/inner, double):
Code:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="scale(2)">
...
</g>
</svg>


Possible units have to be considered (pt, pc, mm, cm, in) and the presence of the attribute viewBox which changes the proportions of the drawing too.

But when the size in the svg tag misses or is given by 100% (which is the same) an interpreter for the svg code is needed even if it is a simplified one. A very simple approach could be a search for all rectangles within the drawing as a very simple but often used object. In most cases one of these rectangles represent the background and is the largest one. So the maximum widht and maximum height of these rectangles can be a measure for the size which then can be used to find the necessary scale factor.

I have also played around with objects and a similar example is on the following page where the svg drawing is cut too:
http://fiala.cc/ScrewTur...clude-Files-Object.ashx

But in this application this does not matter because each inserted object is manually sized and needs not to be scaled automatically. (I wanted to do this but in the meantime I found GalleryServerPro which does the same much more better.)
Back to top
WWW
 |  Edit by user
Roger Martin
#4 Posted : Thursday, 7 July 2011 2:58:25 PM(UTC)
Roger Martin

Rank: Administration

Joined: 3/08/2007(UTC)
Posts: 3,300
Location: Fort Atkinson, WI
That is good feedback and I see a path forward, but it sounds like a fair amount of work and potentially fragile, so I think the implementation will have to come after the 3.0 release.

If you (or someone else) don't want to wait, you are welcome to add the feature yourself. If you share it, I will consider including it in GSP.
Roger Martin
Creator and Lead Developer of Gallery Server Pro
Back to top
WWW
ffiala
#5 Posted : Monday, 11 July 2011 1:52:34 AM(UTC)
ffiala

Rank: Member

Joined: 8/11/2010(UTC)
Posts: 14
Location: Vienna, Austria
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
File Attachment(s):
GetImg.zip (636kb) downloaded 1 time(s).
Back to top
WWW
 |  Edit by user
Roger Martin
#6 Posted : Tuesday, 12 July 2011 9:26:01 AM(UTC)
Roger Martin

Rank: Administration

Joined: 3/08/2007(UTC)
Posts: 3,300
Location: Fort Atkinson, WI
Interesting analysis. Since you mentioned ImageMagick is able to resize svg files, I did a test and confirmed it. GSP already uses ImageMagick to create resized versions of other files, so all you have to do is add svg as one of the file types that should be processed by ImageMagick:

Code:
UPDATE [gs_GallerySetting]
SET [SettingValue] = 'pdf,.txt,.eps,.psd,.tif,.tiff,.svg'
WHERE [SettingName] = 'ImageMagickFileTypes';


Restart the IIS app pool to force the settings to be reloaded. Of course you need convert.exe in the bin directory (get it from the GSP Binary Pack) and the app must be running in full trust.

You will also need the fix for the bug you identified earlier in this thread. A few minutes ago I updated the 2.5.0 patch to include this fix. If you need the source code to apply the fix yourself, let me know.
Roger Martin
Creator and Lead Developer of Gallery Server Pro
Back to top
WWW
 |  Edit by user
Rss Feed  Atom Feed
Users browsing this topic
Guest
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Powered by YAF 1.9.5.5 | YAF © 2003-2011, Yet Another Forum.NET