Menu
Hi there. This is my first post, so if I do stupid stuff, don’t hesitate to tell me. I’m a noob in this community. If you want to read my introductory text, scroll below.
I currently work on a project with many SVGs as external documents with text.
Among others I want to use a certain font (in woff format) in all SVGs.
In the way the SVGs are currently embedded in the website it appears that linking to an external font is no solution, but only if the font data is embedded within the SVG i.e. it’s no problem to link an external font file into an SVG if the SVG is displayed directly in the browser, but not so if it’s embedded within a webpage. There I have to rely on embedding the font into the SVGs by using
[CODE]data:application/font-woff;charset=utf-8;base64,<base64_encoded_font_data>
To avoid overhead by loading the same data for each SVG and as the font may change over the course of the project (which would require changing all SVGs) I came up with the idea of injecting that font data at runtime into all SVGs.
However with this example (where I don’t yet load the SVG dynamically but it is embedded within the html), I can’t inject the font data completely as only about the first 10000 characters are injected. It does not appear to be a limitation of Javascript strings, as a quick search indicated that they are usually supporting up to 2^31 chars.
Any ideas on this?
[code=html]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-2.1.0.js”></script>
</head>
<body>
<script type=”text/javascript”>
$(document).ready(function()
{
$(‘#btnTest’).click(function(e)
{
var font='[URL=”http://pastebin.com/dadzDcUj”]<Long base64 string here, which I link through pastebin, as it exceeds the message limit>[/URL]’;
var data = ‘<style type=”text/css”> n
<![CDATA[ n
@font-face {n
font-family: Ostrich;n
src: url(“data:application/font-woff;charset=utf-8;base64,’+font+'”); n
n
}]]></style>’;
$(“defs”).each(function() {
$(this).html(data);
});
});
});
</script>
<div id=”svgload” style=”width: 100%; height: 300px;”>
<svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink”>
<defs></defs>
<g>
<rect id=”idRect1″ fill=”#FF0000″ width=”300″ height=”300″/>
<text id=”idText1″ x=”20″ y=”20″ font-family=”Ostrich” font-size=”20px” fill=”black”>Hello!</text>
</g>
</svg></div>
<div id=”btnTest”>Click Me!</div>
</body>
</html>
Personal introduction text
[I]I have a computer science MSc with a good background in usability and web development. I currently work partially as a freelance web developer. I considered joining a message board on web development, as I was more used to kind of a closer community in my “previous” online life, than it is currently implemented e.g. with StackOverflow. I think StackOverflow has it’s uses, but I probably need something else for now and try it with the “closer community” approach. If I break forum rules, don’t hesitate to tell me (but yes, I follow common netiquette anyway). As said I’m still a community noob and deem no intentional harm.