Is there a problem with SVG Image tag implementation ?

[Mircea Moise]

Hi all,

I am trying to use SVG through Dart and I run into a problem while attempting to use svg:image. First, I want to point out that I did not used the SVGImageElement class because I could not figure out how to set the url for the image (documentation only says something about a "get href()" which is still abstract). I guess there still is work to be done for the SVG implementation.

The code I am using is the following:

#import('dart:html');
void main(){
  Element can = query("#canvas");
  SVGElement img = new SVGElement.tag("image");
  img.attributes = {"x":"140", "y":"140", "width":"320", "height":"240"};
  img.attributes["xlink:href"] = myurl;
  can.nodes.add(img);
}

In the html I have an svg element with the id "canvas". The result is that it just doesnot show anything.
If I replace the line: SVGElement img = new SVGElement.tag("image"); with SVGElement img = new SVGElement.tag("rect"); it renders a black rectangle with the dimensions defined above. Also, if I add the image tag manually in html, the image is rendered correctly. Moreover, I printed can.innerHTML at the end and it seems to be correct.

My guess is that there is a problem with the attribute "xlink:href". I have added the "xmlns:xlink=..." as attribute to the svg element without any effect. It think it might be a problem with the namespaces for attributes in dart, meaning that it handles the "xlink:href" as the name of the attribute without checking for the presence of namespaces and it considers "xlink:href" to be part of the default svg namespace. This is just a speculation...

Has anyone encounter this issue with the svg image element? Any tips or ideas would be helpful. Thank you!

[Mike-Delphi-SQL-TX]

Yes, I have already filed a bug related to the Dart DOM's problems with the SVG xlink:href attribute, but apparently it has not gotten enough "starred" ratings to be considered for M1 or such.  Your issue sure sounds likely related.

Please "star" this: http://code.google.com/p/dart/issues/detail?id=5395

My project on github may interest you: https://github.com/IntersoftDev/dart-squid ... it is all about SVG widgets created in-code.  I do a lot of in-code creation of SVG objects.  But, there is a bigger overall SVG-related Dart-bug here that I ran into if you are doing standalone-SVG-docs (vs. inside HTML "wrappers):

http://code.google.com/p/dart/issues/detail?id=2977 -- you will likely hit this if you try that innerHTML approach on standalone SVGs... again, please "star" this, as the Dart SVG DOM has some strangeness to it.

I may have time to upload a more generic SVG-Image-Widget in the next week or two, but there is nothing too special about the SVG image element aside from (as you noted) perhaps the Dart DOM issues coming into play.  At least, it seems OK in early tests I did, aside from noted problems with Dart-implementation-layer.

Hope that helps.

[Mircea Moise]

Thank you. It was really helpful because now I know what exactly is the problem.

I hope the fix will be added as soon as possible. Currently I am working on porting Raphael.js to Dart and this issue is kind of a showstopper for the use of svg:image element.

[Mike-Delphi-SQL-TX]

I would definitely be interested in a Dart port of Raphael...  in fact, I looked at Raphael a few times and I could not stand the JS code, nor did I care for the legacy support of the deprecated VML markup... it just made the code more confusing, complex, and convoluted than it needs to be.  VML is dead, and implementing a strict SVG-only target for a Raphael.dart would be quite nice.

And, I understand how these existing Dart DOM/elementimplementation bugs would be a showstopper for much of what would be needed to make the implementation work well (certainly in standalone SVG files).  I wish I knew enough about the Dart DOM layers and implementation to debug this and fix it, as it is causing me to become very frustrated too as I cannot achieve my objectives (where, in JS I could make my code work, even as my JS code was much uglier... but, what good is clean modern OO Dart code if the underlying SVG stuff is broken? ughhh). So, for now I write "wrappers" (HTML docs/shells) for my SVG docs, but that is just a whacky requirement and then there are the issues like the messed up xlink:href attribute, etc.  I hope the Dart team prioritizes the SVG DOM implementation so it is actually useful, otherwise I will end up going to TypeScript if needed, since from what I can tell, MS is not trying to reengineer the DOM-access in anyway that would prevent it from working as it does via JS.

Mircea, be sure to post a link to your Dart implementation work if you make it public... I look forward to checking it out.  And, in the meantime, I will hope for resolution to these SVG-related bugs in Dart. m

[Mircea Moise]

Thanks for support. I hope I will get over these issues.

I will definitely make it public. Probably it will take 1 or 2 more weeks until I will have enough functionality implemented to release an initial version. I will come back with an reply to this post when it is ready.