Image does not show in elm-svg

[Berry Groenendijk]

Hi,

I am using elm-svg to create some image. I am trying to show image in SVG. I am using the image-tag, but the image doesn't show. This is some example code that loads some image on the internet. 

import Svg exposing (..)

import Svg.Attributes exposing (..)

import Html exposing (Html)

main : Html

main =

  svg [ version "1.1", x "0", y "0", viewBox "0 0 323.141 322.95" ]

    [ polygon [ fill "#F0AD00", points "161.649,152.782 231.514,82.916 91.783,82.916" ] []

    , image

        [x "50", y "50", width "100px", height "100px", xlinkHref ("http://icons.iconarchive.com/icons/pelfusion/flat-file-type/512/jpg-icon.png")][]

    ]

Is it something I am doing wrong? Is it a bug in the elm-svg library?

Thanks for your help,

Berry

[Peter Damoc]

Hi Berry, 

I don't think you are doing anything wrong, it might be a bug in the way the SVG gets generated. 
If you put the generated svg into a file it throws the following error:

XML Parsing Error: prefix not bound to a namespace

It should have something like 

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink" 

as part of the svg properties. 

I've tried to hack that with VirtualDom.property but for some reason it does not work. 

This is the code I used:
http://share-elm.com/sprout/55c650bbe4b06aacf0e8bdc1

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

There is NO FATE, we are the creators.
blog: http://damoc.ro/

[Berry Groenendijk]

Hi Peter,

I also was looking into namespaces. Adding namespace declarations does indeed not seem to help. And namespace declarations also do not show up in the DOM (at least not in Safari and Chrome (using the dev web inspector)).

I am at a loss here.

Berry

Op zaterdag 8 augustus 2015 20:58:41 UTC+2 schreef Peter Damoc:

[Berry Groenendijk]

I think I'm close to understanding the issue. See: http://stackoverflow.com/questions/6893391/adding-image-namespace-in-svg-through-js-still-doesnt-show-me-the-picture

In Javascript when setting an attribute with a namespace you must use setAttributeNS:

setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', your_url_here))

setAttribute will not suffice.

I do not understand the code in Native/VirtualDom.js completely, but setAttributeNS isn't in there. setAttribute is. My suspicion is that the virtualdom code doesn't handle namespaces correctly.

I will look into it further, but help is welcome.

Berry

Op zaterdag 8 augustus 2015 21:46:13 UTC+2 schreef Berry Groenendijk:

[Berry Groenendijk]

I thought I couldn't solve this, but I did ;-)

I changed the code that sets the attributes in Native/VirtualDom.js to this (linenumber 98 and further):

// Set attributes

    if (propName === "attributes") {

        for (var attrName in propValue) {

            var attrValue = propValue[attrName]

            if (attrValue === undefined) {

                node.removeAttribute(attrName)

            } else {

                if (attrName.indexOf("xlink:") > -1) {

                    node.setAttributeNS("http://www.w3.org/1999/xlink", attrName, attrValue)    

                } else {

                    node.setAttribute(attrName, attrValue)

                }

            }

        }

        return

    }

It's just a dirty hack that only works for the xlink namespace. There is probably a more appropriate way to solve this. But, since xlink is the only namespace used (besides svg itself), it is pretty okay. I compiled the code and used it in an offline example... and it works. The images is shown! Proof is this screenshot. The green "JPG icon" (which is in fact a png) is this image on the internet: http://icons.iconarchive.com/icons/pelfusion/flat-file-type/512/jpg-icon.png

I will file an issue in Github in the virtual-dom library.

Berry

Op zaterdag 8 augustus 2015 22:51:45 UTC+2 schreef Berry Groenendijk:

[Peter Damoc]

Excellent find. 

SVG is very fresh as a library and small things like this are bound to appear here and there. 

File the issue and maybe Evan will either find a more permanent solution of just use the `hack`  ;)