0

my ultimate goal is displaying images on my webpage which I can easily adjust the color of.

Currently I am doing it with inline SVG; like so:

        <a href="https://thechymera.tumblr.com">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewbox="0 0 100 100">
        <path class="social" d="M 100,0 0,0 0,100 100,100 z M 71.028,79.925 c -2.886,1.358 -5.506,2.315 -7.848,2.865 -2.344,0.545 -4.877,0.819 -7.599,0.819 -3.092,0 -4.917,-0.388 -7.291,-1.166 -2.375,-0.784 -4.402,-1.902 -6.077,-3.337 -1.681,-1.447 -2.841,-2.986 -3.49,-4.612 -0.65,-1.628 -0.972,-3.99 -0.972,-7.082 l 0,-23.714 -9.187,0 0,-9.576 c 2.655,-0.861 5.736,-2.099 7.626,-3.708 1.899,-1.615 3.418,-3.547 4.564,-5.807 1.149,-2.255 1.938,-5.132 2.369,-8.62 l 9.618,0 0,15.642 15.635,0 0,12.071 -15.637,0 0,17.34 c 0,3.924 -0.051,6.185 0.366,7.297 0.413,1.106 1.447,2.255 2.574,2.919 1.498,0.898 3.207,1.346 5.132,1.346 3.425,0 6.832,-1.112 10.216,-3.338 l 0,10.665 0,-0.004 z"></path>
        </a>

(And specifying my colors in a linked .css file:

svg:hover .social { fill: #efa5d6; }
svg .social { fill: #b5b5b5; }

).

I get the d="<...>" values by cating my SVG files.

My complaint with this method is:

I do not load the image from an editable source. I cannot directly edit the HTML if I want to change details in my image. I either have to copy the path values into a new SVG file, or keep the exact corresponding SVG file on record. after I am done editing, I can't just rsync and rely on the fact that my HTML is still pointing to the same file, rather I have to edit the HTML as well and paste the path value. This easily adds 2-1000 further steps to my workflow, which, for a trial-and-error designer such as myself is quite significant.

Is there anyway to keep the capabilities (shown above) and wide support offered by inline SVG without actually inlining the SVG, but rather loading it from a different location?

TheChymera
  • 17,004
  • 14
  • 56
  • 86
  • http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement – tbh__ Oct 21 '14 at 22:30
  • I had in fact seen that thread before I decided for inline SVG. The reason I still decided on that was that the jquery code didn't work for me, and I don't know how to troubleshoot it. – TheChymera Oct 21 '14 at 22:34
  • Ah, yeah, his php answer maybe work, I suppose it depends on your external source specs, I'm curious to seeing how weird you could get using ajax to try this. I was curious about this as well, for a d3 project, but I moved away from it. – tbh__ Oct 21 '14 at 22:46

2 Answers2

1

Yes. The way I've done it before is by using a server-side script to include the SVG file into an element on the page, like this:

<div id="my-svg-image">
    <?php include "image.svg"; ?>
</div>

By wrapping it, I can target the specific SVG with CSS without having to know whether the file contains an ID or not, or to specifically target instances of the image. Although I haven't tried yet, it stands to reason that some sort of AJAX-like request could be made to grab the SVG instead.

David Millar
  • 1,858
  • 1
  • 14
  • 23
0

http://jsbin.com/yupago/edit

svgUrl = 'http://upload.wikimedia.org/wikipedia/commons/f/f2/University_of_Tirana_logo.svg';


$("#svg").load(svgUrl + " svg", function() {  

$("#svg").find('path').css({fill:'#000'});
    //do stuff
});
tbh__
  • 324
  • 3
  • 17