brynn tries to understand CPG's SVG plugin

[brynn]

Hi Friends,
This is kind of crazy, the thought that I could actually fix the gallery's SVG plugin.  But I want to try and understand how it works, in the first place.  Honestly, it's doubtful that I could fix it.  But maybe understanding it will allow me to explain the problem concisely to someone who could fix it.

So this topic has 2 purposes.  1 is just to document my questions for myself, and answers, if I find any.  The other purpose is to get answers to my questions, if anyone else knows the answers.  So after I post my questions, I'll go and try to find the answers myself.  If I can't, I'll post a reply and ask for help.  Hopefully, by putting all our heads together, we can come up with a fix.  (Although still a bit crazy idea, for me, lol.)

I have 2 images to study, in this album:  http://inkscapecommunity.com/ic_gallery/thumbnails.php?album=15.  They are both titled "starfire".  The first is a PNG and the 2nd is the SVG.  So I've started by looking at the source code for that page.

This appears to be the code for the starfire.png thumbnail:

Code: [Select]

        <td valign="top" class="thumbnails" width ="20%" align="center">
                 <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                                <td align="center">
                                        <a href="displayimage.php?album=15&amp;pid=7#top_display_media"><img src="albums/userpics/10001/thumb_starfire.png" class="image" width="128" height="128" border="0" alt="starfire.png" title="Filename=starfire.png
Filesize=26KiB
Dimensions=148x148
Date added=Sep 18, 2013" /><br /></a>
                                        <span class="thumb_title">starfire</span><span class="thumb_title">1 views</span>                                         
                                </td>
                        </tr>
                </table>
        </td>

And this appears to be the code for the starfire.svg thumbnail:

Code: [Select]

        <td valign="top" class="thumbnails" width ="20%" align="center">
                <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                                <td align="center">
                                        <a href="displayimage.php?album=15&amp;pid=16#top_display_media"><div><object data="albums/userpics/10001/starfire.svg" type="image/svg+xml" width="128" height="128">Your browser doesn't support svg files</object></div><br /></a>
                                        <span class="thumb_title">starfire</span><span class="thumb_title">2 views</span>                                         
                                </td>
                        </tr>
                </table>
        </td>

The first thing that jumps out at me, is why does the PNG have Filename, Filesize, Dimensions, and Date Added, inside the img src and a href tags, while the SVG doesn't?

And the SVG doesn't use img src at all.  Instead, it uses object data tag.

So now I'll visit the W3Schools site to sort that out.  (And that's where I plan to learn about php as well.)

[Lazur]

When you hoover the mouse over the png, those data will be displayed, that's why they are included.
I may be wrong but the svg itself is not an image but a more complex thing (at least without viewbox added?), as to render it you don't define an src url where you link it from, but rather the svg data itself, to be rendered in a live way (data and type tags).

[brynn]

Related topics:  http://forum.inkscapecommunity.com/index.php?topic=79.0
and  http://forum.inkscapecommunity.com/index.php?topic=95.0

Time for an update.  microUgly from IF emailed me some comments which got me thinking about this issue again.  He said:

Using <object> tags, as the CPG plugin obviously does, is an old-school 
way to display SVG from the days when browsers could not display an SVG 
without a special plugin (much like most browsers need a Flash plugin to 
display Flash files)

Modern browsers no longer need a plugin, so you can use the same HTML to 
display a SVG as you use for PNGs or JPGs, etc.

There will be a handful of users who the SVG won't display for if you do 
this.  They will likely be using older versions of Internet Explorer.

You probably won't be able to automatically set a width and height for the 
<img> tag as this would require having to interpret the SVG XML, so I 
leave these attributes off.  It's not totally valid to leave this 
attributes off, but all browsers will now to display the image at its 
actual size when they are not set.

So that got me thinking, if browsers no longer need plugins to display SVGs, why does the gallery need a plugin?

I probably caused a mess in the gallery by doing this, which I'm pretty sure I know how to fix.  So don't panic! I uninstalled the SVG plugin, temporarily.  So at the moment, none of the SVGs are displayed unless you go to the intermediate page and click on that transparent cube image/icon.  That will display the full size SVG.  And I'm pretty sure I can fix it.  But worst case - all the SVGs will need to be uploaded again (after I reinstall the plugin).

What did I learn by uninstalling the SVG plugin?

• SVGs can be uploaded without the plugin!  They just can't be displayed in albums.
• Thumbnails and intermediate "images" function properly! (with the plugin installed,  you have to click beside the thumbnail to get the intermediate page, and the same for the intermed image, to get the full size)  Without the plugin, they can be clicked on normally.  However, the actual image is not displayed at thumb or intermed. sizes, and instead, there's a default image/icon that looks like a transparent cube.

My new questions:

• Without the plugin, are the thumbnail and intermed images just not created?  How can I find out?  Oh!  I'll bet I can look on the server to see if they exist or not, right?
• So does that mean the function of the plugin is to create and display the thumbnail and intermediate sizes?
• :idea:   There is a way to upload an image to accompany videos, so that the gallery displays the image instead of the default video image/icon.  Could this work for SVGs?  I'll investigate further.  Although of course, ideally, we want the SVG to be displayed, and not a separate PNG.

Sssoooo.....Ok, there's another plugin which allows me to define other file formats, besides what CPG handles out of the box.  If I had not defined SVG, we would not be able to upload SVGs at all, even with the SVG plugin installed.  The only way to define the SVG format, is using "Document" for Content Type.  All raster images use "Image" as a Content Type.  (MIDI or MP3 use "Audio", SWF is "Movie")  But when I switch the Content Type to Image for SVG, the SVGs cannot be uploaded.  I suspect this has something to do with why the SVG image is not displayed (or maybe even created, I haven't looked at the server yet) as thumbs or intermeds.

I guess that SVG requires the "Document" for Content Type because the SVG image is also an XML file (which is a document).  So I'm wondering if there is a way to define the SVG as Image, and still be able to upload it?  The MIME type for SVG is "image/svg+xml".  I wonder if there could be another way to write that, that would work.  I'll experiment!

Ok then!  Time to stop writing, and do some more research.

Comments invited and welcomed 

[brynn]

More:

It appears that the intermed and thumb sized images are just not created, without the plugin.

Next looking into uploading a PNG as a thumb and intermed....

[brynn]

Oh, awesome!  This may be the best solution, although quite arguably!

I've installed a new plugin which makes it easy to upload a separate image which will be shown as thumb and optionally intermediate.  After you've uploaded your SVG (or ANY file) make your way to the intermediate page (the one with all the file info).  There you will see a new button "Custom Thumbnail" (in my theme, it's just to the right of the "Delete This File" button, but may be situated differently in some themes).

Look at my "just for testing" album.  http://inkscapecommunity.com/ic_gallery/thumbnails.php?album=18 
First you'll notice what mess it made when I uninstalled the SVG plugin.  They all happened to be SVGs in that album, so now they all have that tranparent cube icon -- except for 1.  There I used the new button to upload a PNG which serves as both the thumb and intermed, for 1 of them.  (Of course it's so tiny, "intermediate" is  entirely moot!)  Maybe I'll wait a couple of days before I fix it, so you all can see what this change would mean, if we adopt it.

Honestly, I've only been considering this option for an hour or 2.  So someone may come along with some reason against this.  But I quite like this arrangement -- at least until we can get the SVG plugin fixed!

What do you all think?

Edit -- PS - I'll upload a few more PNGs to go with some of the SVGs in my "...testing" album, so you can see how nice it looks.

[Lazur]

I think adding a simple viewbox attribute to the svg manually is way more easier than creating a thumbnail png...
And you would need to upload a png which looks ok in thumbnail and normal size too.
Maybe even upload two png-s -one for thumbnail size, one for normal size-, and an svg just to have an svg displayed in the gallery?
In the sense of a "gallery", it is not even displayed.
At a museum would you look at the original Mona Lisa, somewhere at the backdoor, if you see a poster of it first in a nice frame?

Uploading thumbnails separately is painful on many levels in my opinion.


On the other hand, I think it IS a good idea to have the original image open on a new tab if clicked on the image.

[brynn]

Well I found a plugin that will allow the creation of both the thumbnail size and the intermed size, at the same time.  (Still installed at the moment, so you can try it.)  However, it seems not to like being associated with SVGs for some reason.  If I assign a custom thumb to an SVG, it only creates a thumbnail size.  But if I assign a custom thumb to a PNG, it creates both a thumbnail and an intermed image.  So I'm waiting for help in the CPG forum on that.

But I'm kind of excited to learn that the plugin only functions, apparently, to create the thumbnail and intermed image, in the first place.  That makes me less afraid of the php I'll have to learn, if I am to fix the SVG plugin.

And also, the viewbox thing.  If I can learn how to write the php, it seems to me like the viewbox could be written right into the plugin, theoretically.

But right now, it's late and I'm sleepy.  So later this week I'll know more about it 

[brynn]

Update

I finally concluded that I will not be able to fix the CPG SVG plugin.  Not unless I learn how to write PHP, which is not very likely.  But if anyone wants to volunteer to re-write the plug-in, please don't hesitate to contact me.

Marking this solved, for now