Use SVG <image> tag with Om

Few days ago I had to use <image> for rendering image inside an SVG “scene” inside an Om component, but I ran into a problem, Om doesn’t provide om.dom/image. Then I found that neither do React, and there’s already outdated pull request for that.

But React has an ugly solution for using raw html – dangerouslySetInnerHTML. So it’s easy to create Om component for an image:

(defn image
  [{:keys [href x y width height]} _]
  (reify
    om/IRender
    (render [_]
      (let [html (str "<image x='" x "' y='" y "'"
                      "width='" width "' height='" height "'"
                      "xlink:href='" href "'/>")]
        (dom/g #js {:dangerouslySetInnerHTML #js {:__html html}})))))

It just put a raw html inside <g> SVG tag. Usage:

(om/build image {:href "image.png"
                 :x 10
                 :y 20
                 :width 200
                 :height 300})

Solution is a bit ugly and unsafe, but it works:

Gist with the example sources from the iframe.