0

I have a HTML file, which is then calling a javascript file. Basic function of the javascript file is to draw a svg file, and do modifications on it. for example

I am embedding the svg image in my JS file like this

this.my_object.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="img/gauge.png" width="122" height="127"/><g id="needle" transform="rotate(0,62,62)"><circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/><rect transform="rotate(-130,62,62)" name="arrow"  x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/><polygon transform="rotate(-130,62,62)" points="58,39,66,39,62,30,58,39" style="fill: #c00; stroke: none"/></g><text id="value" x="35" y="103" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"></text></svg>';

Now, according to this post Safari embeded SVG doctype

I cant inline svg image because then it wont work on safari. Now due to certain restrictions I cant embed svg file in html, it has to be accessed through javascript. Is there any way svg image can be used in javascript without using innerHTML, as finally the image has to be renedered on safari.

PS: This image has to be copied in the same folder when compiling. https://sphotos-b.xx.fbcdn.net/hphotos-snc6/179594_10150982737360698_1827200234_n.jpg

Community
  • 1
  • 1
SandBag_1996
  • 1,570
  • 3
  • 20
  • 50

1 Answers1

1

I'm currently in Linux and can't test with Safari, but still will post the answer...

Try to do in this way.

HTML:

<div id="image-container"></div>​

JavaScript:

var container = document.getElementById('image-container'),
    image = document.createElement('img');
image.src = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="img/gauge.png" width="122" height="127"/><g id="needle" transform="rotate(0,62,62)"><circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/><rect transform="rotate(-130,62,62)" name="arrow"  x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/><polygon transform="rotate(-130,62,62)" points="58,39,66,39,62,30,58,39" style="fill: #c00; stroke: none"/></g><text id="value" x="35" y="103" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"></text></svg>';
container.appendChild(image);
​

UPDATE #1 - data URI encoding:

The usage of unencoded data URI might be failed in IE 8 and 9.

So you can determine the browser using navigator.userAgent and if it's IE >= 8, then encode the string to Base64 before assigning it as value of image.src.

UPDATE #2 - using object tag:

var container = document.getElementById('image-container'),
    imageObject = document.createElement('object');
imageObject.type = 'image/svg+xml';
imageObject.data = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="img/gauge.png" width="122" height="127"/><g id="needle" transform="rotate(0,62,62)"><circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/><rect transform="rotate(-130,62,62)" name="arrow"  x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/><polygon transform="rotate(-130,62,62)" points="58,39,66,39,62,30,58,39" style="fill: #c00; stroke: none"/></g><text id="value" x="35" y="103" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"></text></svg>';
container.appendChild(imageObject);

​You can set either the data URI or direct link to .svg file location.

object DEMO

UPDATE #3 - CSS approach:

var container = document.getElementById('image-container');
container.style.width = '100px';
container.style.height = '100px';
container.style.backgroundPosition = 'center';
container.style.backgroundImage = 'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="img/gauge.png" width="122" height="127"/><g id="needle" transform="rotate(0,62,62)"><circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/><rect transform="rotate(-130,62,62)" name="arrow"  x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/><polygon transform="rotate(-130,62,62)" points="58,39,66,39,62,30,58,39" style="fill: #c00; stroke: none"/></g><text id="value" x="35" y="103" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"></text></svg>\')';

​

DEMO of CSS approach

UPDATE #4 - MIME type:

Comment by UnderDog:

I changed the datatype, and it worked.. but additionally I also had to configure web.config file to add this:

<staticContent><mimeMap fileExtension=".svg" mimeType="image/svg+xml" /></staticContent>

The server should send correct Content-Type header.

Community
  • 1
  • 1
Eugene Naydenov
  • 7,165
  • 2
  • 25
  • 43
  • As a side note, when I open that URL in Chrome, two pencils (?) are drawed, but on refresh, one disappears... – pimvdb Aug 17 '12 at 21:53
  • That's strange. I'm seeing only one pencil in Chrome. – Eugene Naydenov Aug 17 '12 at 21:57
  • Actually, the image needs to be attached with "my_object" else it wont be displayed. So, I tried doing this this.my_object.setAttribute('image', image); but it still doesn't work (not even on firefox now). I tried declaring the file in css, and then access it like this.my_object.setAttribute('class', 'SVGimage'); but no luck – SandBag_1996 Aug 17 '12 at 22:15
  • I can try, but I dont know how that will help. my_object is an object, and the way it will put the image on background will be with setAttribute or innerHTMl, initializing directly to image source doesnt seem right. – SandBag_1996 Aug 17 '12 at 22:26
  • Let's clarify, what do you mean saying "my_object is an object"? the variable `my_object` is a reference to HTMLElement `object`? If yes, then my second update in answer could help. – Eugene Naydenov Aug 17 '12 at 22:31
  • my_object is an element, which will be inserted in the parent like this, this.m_parent.insert(this.my_object).. – SandBag_1996 Aug 17 '12 at 22:49
  • I am sorry I should have been more clear when I mentioned its an element. this.my_object = new Element('svg'); – SandBag_1996 Aug 17 '12 at 22:55
  • So the StackOverflow answer you referred to is saying clear that 'svg' element can't be embedded itself, but you have to use either `embed`, `object` or `iframe` element to do this. – Eugene Naydenov Aug 17 '12 at 23:03
  • I did that. Like I used embed.. this.my_object = new Element('embed'); this.my_object.setAttribute("src","img/gauge.svg"); Is this not the way? – SandBag_1996 Aug 17 '12 at 23:13
  • 1
    Did you see my example from my "UPDATE #2"? It's different. You should set `data` attribute instead of `src`. And yes, it can be a link to image file location. Also you have to set the `type` attribute as I showed in my example. – Eugene Naydenov Aug 17 '12 at 23:16
  • I changed the datatype, and it worked.. but additionally I also had to configure web.config file to add this – SandBag_1996 Aug 17 '12 at 23:29
  • Can you provide help in one more thing.. Now I need to access one element of svg file.. You can see above. It is called 'needle'. can i access it now? Previously, I was able to access it, since svg was inline.. – SandBag_1996 Aug 17 '12 at 23:33
  • Create a div element in memory, insert svg markup into it. Retrieve `#needle`, modify it. Get div's innerHTML, set new `object.data`. – Eugene Naydenov Aug 17 '12 at 23:45
  • div element with "memory"? can you explain with code, I would be really grateful. – SandBag_1996 Aug 17 '12 at 23:47
  • Can you create a separate question for this? – Eugene Naydenov Aug 17 '12 at 23:48
  • Also, if you could add mime thing in your answer, I can accept it. :) – SandBag_1996 Aug 17 '12 at 23:51