We Keep Coding

SVGs doesn't render in any browser when hosted externally [duplicate]

I'm aware that there are plenty of methods to use SVG sprites in HTML. My preference to this date has been to use something like
<div class="container">
<svg class="icon">
<title>Icon Title</title>
<use xlink:href="/svg/sprite.svg#icon"/>
</svg>
</div>
However, now I wanted to load the sprite from a subdomain, like this:
<div class="container">
<svg class="icon">
<title>Icon Title</title>
<use xlink:href="https://sub.domain.com/svg/sprite-home.svg#icon"/>
</svg>
</div>
Unfortunately, this doesn't work as the file is not fetched. I've tried with <object> as well, but that doesn't seem to work either.
So far, I'm only able to use
<?php include_once("https://sub.domain.com/svg/sprite.svg"); ?>
It's ok as a quick fix, as this doesn't involve much refactoring. However, this also means the HTML gets bloated.
With the <use> method the sprite gets cached. But with the include method the sprite isn't cached, only gets embedded, and so it is far from ideal.
Does anybody use any alternative to the php include method that is compatible with cross domain requests and browser caching?

Thanks to this post at css-tricks I've been able to work out how to do this. The idea is to AJAX to bring the SVG sprite with jQuery like this (see post for vanilla version):
$j.get("https://sub.domain.com/svg/sprite-home.svg", function(data) {
var div = document.createElement("div");
div.className = 'no-display';
div.innerHTML = new XMLSerializer().serializeToString(data.documentElement);
document.body.insertBefore(div, document.body.childNodes[0]);
});
What this does is insert the SVG at the beginning of the document. Unlike the original post, I've added a class to make it hidden, as otherwise you get a blank big space at the top in Chrome. The result is great (it works with local files too) and now you can reference icons by just their id.
<div class="container">
<svg class="icon">
<title>Icon Title</title>
<use xlink:href="#icon"/>
</svg>
</div>
There are many advantages to this technique:
SVG sprite is cached
Really simple to use as you only reference the icon
You can request several SVG sprites and they all work the same
The only thing to bear in mind is that, this requires CORS AJAX to be set up. For those using nginx, it would be simple enough:
location ~* \.svg$ {
...
add_header 'Access-Control-Allow-Methods' 'GET';
add_header 'Access-Control-Allow-Origin' 'https://your.domain.com';
}

How to put the ALT-value of an image into a variable in javascript or jquery

I’ve made a cardspread program that is based on the source of the image. It works allright, but it is loading slowly, because now 78 different cards are loaded. I like to speed up the loading and I thought I needed an extra item per DIV. So I added an ALT-tag to each image. Like this:
<div id="kaart1">
<alt=kaart14.jpg>
<img src="images/kaart1.jpg" width="110" height="180" onclick="showDiv(event)>
</alt=kaart14.jpg>
</div>
Now I need only 1 image to load 78 times, which is faster. The problem which I am facing now is that I want to read the alt value into a variable (in this case: kaart14.jpg).
I’ve tried :
$('.status').click(function() {
var status = $(this).attr('alt');
});
But that stays empty. Does anyone have a suggestion how to solve this in Javascript or jQuery?

First, there is no <alt> tag. It is used as alternative to <img>. The value is displayed if the image is not loaded.
It is just plain text. If you put a url there, it will just display the url and not the image itself.
Eg:
<img src="myphoto.jpg" alt="This is my photo">
There is no performance gain if you use alt or not, but you definitely SEO

Your alt attribute should be like
<div id="kaart1">
<img src="images/kaart1.jpg" alt="kaart Image" width="110" height="180" onclick="showDiv(event)>
</div>
alt is an attribute of the img tag,its not a tag itself.And as #Bergi said,the alt attribute will not be an another image.It may be the description.

Text not rendered in d3 visualization

I'm reviewing the code of the visualization here http://bl.ocks.org/mbostock/4062045, and I'm curious to know why is name from the json file not rendered together with the nodes even though the code included:
node.append("title").text(function(d) { return d.name; });

The SVG <title> element is not displayed on screen. It is used as the tooltip text by browsers (and is also used by screen readers) in the same way as a title attribute in HTML.
I.e., the SVG code
<svg>
<image xlink:href="image.png">
<title>My PNG</title>
</image>
</svg>
Is equivalent to the HTML code
<div>
<img src="image.png" title="My PNG" />
</div>

Attribute title is supposed to be displayed as a tooltip (if you hover over a node), and it is really correctly displayed, check it out. (I know... it's not logical, but such is standard)

Combining SVG, HTML and Javascript

I have an HTML file that looks somehow like this:
<html>
<div id="test"> ... </div>
<object data="pic.svg" [...]></object>
</html>
Inside pic.svg, I have an element, let's say, a circle, and I want to realize something like that:
<circle onClick="doSomething()" [...]>
Now, in the js function doSomething() (i.e. when someone clicks on the circle) I want to change my "test"-div. How to do this?

You can access the parent document (and consequently the elements there) from inside the svg like this:
var divInParentDocument = window.parent.document.getElementById('test');
Here's a (slightly more complex) example showing how to call a function in the parent html document from inside an svg.

If you want the SVG to live in the same DOM as the HTML, best to use an embedded <svg> element. It's pretty well supported.
Something like
<svg id="svgroot" width="600" height="600"
version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="text/ecmascript">//<![CDATA[
function doSomething() {
document.getElementById('test').appendChild(...);
}
//]]></script>
<circle onClick="doSomething()" />
</svg>

Jquery cycle scrubber plugin: adding links to images

I'm using this jquery plugin which lets you scrub through images:
http://thespiral.ca/jquery/scrubber/demo/
I'm trying to add a link to each image, like this for example:
<div id="basic">
<img src="images/beach1.jpg" width="200" height="200" alt="Beach1" />
<img src="images/beach2.jpg" width="200" height="200" alt="Beach2" />
<img src="images/beach3.jpg" width="200" height="200" alt="Beach3" /></div>
But something in the script seems to be blocking links, and no matter what I do the image have a "#" link.
Can anyone help?
Update:
I put up a jsFiddle: http://jsfiddle.net/qdGXZ/

The problem may be in jquery.cycle.all.min.js. There is a code in it that may cause this kind of behaviour. Here it is:
else{a=''+(i+1)+"";}
Comment it and see what happens. This was the only piece of code in the given example that could cause this.
To fix this you need to pass href attribute defined by you to the else case and do something like this:
else{a=''+(i+1)+"";}
I don't know if this will help. Just can't do much. Now you know what is the problem and what you should do to fix it. The rest is up to you.