change image to inline SVG >> to have all SVG features

Question

I have SVG images and I want to export their files as img then change them back to SVG .. the reason of the change is that I want to change all the rectangles colours inside the SVG images.

I used a way described in How to change color of SVG image using CSS (jQuery SVG image replacement) but nothing change. I also when I see the Inspect from the browser the image is still img tag not SVG tag..

the problem is that the SVG embed inside Object .. the Object inside table cell .. the table rows created row by row using javascript I could not access the SVG rectangles to change them.. thats my problem :( it has been week trying .. when it is inline SVG I can change it but many SVGs embedding inside object I could not change them

  <body>

    <fieldset id="output" class="form">
    <legend class="main">Output</legend>
    <br> 
  <table cellpadding="0" cellspacing="0" class="display" id="Table" style="table-layout: fixed" width="auto" >
    <tbody>
    </tbody>
  </table>
 </fieldset>
</body>

and here the script :

for( var j=0,g=0; g < 3; j++,g++ ) {
//--------- start drawing the table 
var table = document.getElementById("Table");
var row = document.createElement('tr');
row.id="singlerow";

// first col----

var link="http://imgh.us/A_acidus_CBS_106_47_Aspfo1_0027407.svg";

var obj = document.createElement('object');
obj.class="alphasvg";
obj.setAttribute('data',link );
obj.setAttribute('height','30px');
obj.setAttribute('width','300px');

var cell3 = row.insertCell(0);
cell3.id="genemodelcell";
cell3.appendChild(obj);



  //insert row
    table.appendChild(row);

}//end for loop

code sample :SVG inside object inside cell

You could stay on the [original question](http://stackoverflow.com/questions/25772742/how-to-place-svg-image-file-in-html-using-javascript). Anyway, you should wait for the DOM to be ready (especially if you want to have your script in the head). — Cohars, Sep 11 '14 at 20:34
@Cohars I don understand your answer.. could you pleas clarify ? — Nada, Sep 11 '14 at 20:39
Looks like this can be done by adding CSS directly to the SVG: http://xn--dahlstrm-t4a.net/svg/interactivity/hover-change-fill.svg — disperse, Sep 11 '14 at 20:50
About the DOM being ready? Well, you script will be executed when the browser will see it. So, in this case, before the DOM is loaded, you img is not even present in the document. So, we usually put the scripts before `
`. (If it's external files it can be loaded in the head with defer or async). You can use jQuery to [check if the document is ready](http://learn.jquery.com/using-jquery-core/document-ready/) — Cohars, Sep 11 '14 at 20:50
@Cohars thanks for the comment .. I make sure it is ready and now it is SVG but when I try to reach the rectangles nothing chang and the CSS does not applied . — Nada, Sep 11 '14 at 22:56
Ok so that's better. Btw, you shouldn't use `$(document).ready()` twice on the same page, but that's a detail, you'll get used to it. And there's a shorthand `$(function() { /*...*/ });` — Cohars, Sep 12 '14 at 02:53
For the CSS, it is still the same questions, are you sure the file is loaded, the selector is correct etc... I mean if you have a `` in your DOM and CSS rules for it, it will works. [It's as simple as that](http://www.w3schools.com/svg/svg_rect.asp) — Cohars, Sep 12 '14 at 02:56
@Cohars thanks for the replay .. the SVG image is appear in the browser Inspect as SVG but it seems that CSS does not apply on it ;( OR it is changed to SVG after the dom is loaded !! — Nada, Sep 12 '14 at 04:23
There is no such thing. CSS is painted whenever it's available. You could just put it on [JSFiddle](http://jsfiddle.net/) (with the SVG code not the image, you can copy it from the inspector). And I might be able to help. — Cohars, Sep 12 '14 at 15:45
@Cohars I put the code. and here is the SVG content of the image I use in the body but it suppose to be inside the third column of the table [my code](http://jsfiddle.net/oetuv7vg/1/)>> I want to access these SVG inside each cell and change there colours from black to red — Nada, Sep 12 '14 at 17:36
That's a long code. Could you try to reduce your code to the simplest version, so you/we can spot the problem. That's what you should do from your side to find it. — Cohars, Sep 12 '14 at 18:01
@Cohars here is with the code that suppose to change each SVG but it does not excpet the last cell it changes it in the browser [change SVG](http://jsfiddle.net/NadaAMA/Ldfw75t2/1/) — Nada, Sep 12 '14 at 18:16
[short code](http://jsfiddle.net/NadaAMA/Ldfw75t2/5/) this is the short code @Cohars — Nada, Sep 12 '14 at 18:29
It doesn't seem short to me. You have to find a way to make your problem clear. It's just about applying CSS so I think you're able to solve it alone. — Cohars, Sep 12 '14 at 18:34
@Cohars the problem is that the SVG embed inside Object .. the Object inside table cell .. the table rows created row by row using javascript I could not access the SVG rectangles to change them.. thats my problem :( it has been week trying .. when it is inline SVG I can change it but many SVGs embedding inside object I could not change them [shortest code](http://jsfiddle.net/NadaAMA/Ldfw75t2/7/) — Nada, Sep 12 '14 at 18:39

Cohars · Accepted Answer · 2014-09-12T20:04:02.780

After the 10,000 comments we exchanged, here is the final answer.

So the JS is solved, you succeeded to change your <img> to <svg>. You can use Iconic's SVGInjector to do it.

About the CSS, look at your your SVG file. You have inline styling for every elements. It can happen if you draw your SVG with Adobe Illustrator (we can change the options when saving the file, first result in google, the query was "svg illustrator inline css"). So you have to clean your SVG, remove the style attributes, because it will be stronger than your stylesheet. Here the SVG file you could have:

<svg xmlns="http://www.w3.org/2000/svg" height="210" width="500">
  <rect x="100" y="20" width="190" height="10"/>
</svg>

And some css:

svg rect {
  fill: tomato;
  stroke: midnightblue;
}

Here i an update of your JSFiddle, with some :hover effects

PS: See, that's what I meant by reducing your code so we can spot the problem. You could've remove the JS since you gave the code from the browser's inspector, so the JS has already been executed. And you could have a clean your DOM. Plus, the SVG doesn't need to be so complicated when you are experimenting.

Thanks @Cohars .. this clear the idea .. I will try to my code and tell you the result .. I appreciate your help a lot. — Nada, Sep 12 '14 at 20:41

change image to inline SVG >> to have all SVG features

1 Answers1