0

Hi I am trying to serve svg inline in a document rendered by a Django template where the svg ( 2D line drawings) and the document context are dynamically generated. The svg_string is put into my django context and rendered by the template.

{{ svg_string|safe }}

The django version I am using is 1.4.2 , Python version 2.7.3 .rdkit All my code works great when served at the permananent IP . The svg renders perfectly .

Now when I instead try to test the SVG containing view using the django (1.4.2) dev server http://127.0.0.1:8000

I get only the text labels in the svg rendered in Chrome,Firefox and Safari .

There is however one difference between the two svg. They are generated by different versions of the rdkit Cheminformatics library , which uses cairo in the backend.

The Production server served svg has the svg in view-source for html page as :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300pt" height="300pt" viewBox="0 0 300 300" version="1.1">
<defs>
<g>
<symbol overflow="visible" id="glyph0-0">
<path style="stroke:none;" d="M 0.40625 1.421875 L 0.40625 -5.640625 L 4.40625 -5.640625 L 4.40625 1.421875 Z M 0.84375 0.96875 L 3.953125 0.96875 L 3.953125 -5.1875 L 0.84375 -5.1875 Z "/>
</symbol>
<symbol overflow="visible" id="glyph0-1">
<path style="stroke:none;" d="M 0.78125 -5.828125 L 1.84375 -5.828125 L 4.4375 -0.953125 L 4.4375 -5.828125 L 5.203125 -5.828125 L 5.203125 0 L 4.140625 0 L 1.546875 -4.875 L 1.546875 0 L 0.78125 0 Z "/>
</symbol>
<symbol overflow="visible" id="glyph0-2">
<path style="stroke:none;" d="M 0.78125 -5.828125 L 1.578125 -5.828125 L 1.578125 -3.4375 L 4.4375 -3.4375 L 4.4375 -5.828125 L 5.234375 -5.828125 L 5.234375 0 L 4.4375 0 L  
....

The dev server svg has a different structure when viewed as text and shows the following behavior: Renders in browser after saving it to file: Works. Renders in browser after forcing content-type to xhtml+xml : Works.

Does not render inline with default content-type . Only fonts are displayed.

The svg looks like

<svg:svg version="1.1" baseProfile="full"
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        xml:space="preserve" width="300px" height="300px" >
<svg:line x1="114.41" y1="132.42" x2="130.03" y2="146.44" stroke="rgb(0,0,0)" stroke-width="1"></svg:line>
<svg:line x1="113.56" y1="136.50" x2="126.06" y2="147.72" stroke="rgb(0,0,0)" stroke-width="1"></svg:line>

<svg:line x1="87.26" y1="137.68" x2="96.45" y2="142.94" stroke="rgb(0,0,255)" stroke-width="1"><

Sadly using xhmtl+xml breaks all my css and javascript ( bootstrap) and so is not workable.

I have tried the other suggested workarounds to get this svg rendered correctly during development did not work for me.

Is there a way to have the inline svg as served by the rdkit library displayed above rendered in the dev server without using xhtml+xml content type?

Community
  • 1
  • 1
harijay
  • 11,303
  • 12
  • 38
  • 52
  • 1
    Can you switch to the same version of rdkit you use in production? That’s a good idea anyway. The dev server obviously has nothing to do with this. – Vasiliy Faronov Nov 16 '13 at 14:30
  • I did do that ..using brew and getting the rdkit from github "HEAD" on MacOSX and compiling from source in Ubuntu. Despite that the OSX machine is still giving me the svg as given above. I think cairo or some other library in my Mac is giving me the different flavor of svg. – harijay Nov 16 '13 at 15:39
  • I changed the title to make it more rdkit and svg centric – harijay Nov 16 '13 at 15:41

1 Answers1

2

I believe the browser doesn’t draw this SVG in a text/html document because it doesn’t recognize the svg XML namespace. You need to put your SVG in the default namespace. Try this:

svg_string = svg_string.replace(u'svg:', u'').replace(u'xmlns:svg', u'xmlns')

This is a hack that should be enough for your development needs, but if you ever want to do this in production, you should do it more correctly with ElementTree or any other XML library.

Vasiliy Faronov
  • 11,840
  • 2
  • 38
  • 49
  • Thanks Vasiliy . It works once I force the namespace as you recommended. Thanks to your reply I understand that the problem is with xml namespaces. That said I am reinstalling rdkit using "brew install --HEAD rdkit". I may have run dev with non "HEAD" R2013.09 and production with github "HEAD" explaining the difference. For now your workaround helps a tonne!. I also wonder what it is that changes the flavor of svg between rdkit 2013.09 and HEAD (2d6945c0) ..it would be good to know why this happened for future such issues. Also the xhtml-ized svg actually looks more compact. – harijay Nov 16 '13 at 16:34
  • Also it just struck me the reason it works with xhtml+xml content-type without any namespace manipulation is because the browser then switched the namespace appropriately for you. I wonder if there is a way to ask rdkit via cairo to return svg in the default namespace? – harijay Nov 16 '13 at 16:44
  • 1
    @harijay As you said yourself, this could be due to the difference in Cairo versions. As far as I understand, rdkit draws on a Cairo canvas, then Cairo takes care of rendering that into SVG as it sees fit. – Vasiliy Faronov Nov 16 '13 at 16:44
  • ..Yup ..I just installed the github HEAD version and also updated my cairo on the OSX dev machine using brew--It is still producing xhtml version of svg. I will see if it is possible to control this behavior from within rdkit? . OR I may be stuck with detecting the svg flavor and changing it appropriately since I am definitely not going to be able to use xhtml. – harijay Nov 16 '13 at 16:52