Rectangle 27 4

I have no idea what's going on under the hood, but there is an easier solution, at least for inline SVG's (not sure about backgrounds). Change:

<img src="svg-source.svg"/>
<object type="image/svg+xml" data="svg-source.svg"></object>

In addition, you need to make sure you have viewBox defined for the svg document.

According to this answer, using object is better practice anyway. Here is a decent blog post that recommends (for cross-browser compatibility):

<object type="image/svg+xml" data="svg-source.svg">
    <img src="png-version.png"/>
</object>

I have not tested this latter option, but if it works it is much simpler than this solution.

EDIT: I discovered that as embedded objects, SVGs were interfering with "hover" and "click" events, so I finally buckled and decided that I must embed SVGs fully. But I had no interest in pasting every single one, so I have the following at the top of my javascript file (I'm using JQuery):

$(document).ready(function()
{
    $('.deferred-load').deferredLoad();
}
$.fn.deferredLoad = function()
{
    $(this).each(function()
    {
        $(this).load($(this).attr('data-load'));
    });
}
<img src="svg.svg"/>
<div class="deferred-load" data-load="svg.svg"></div>

Of course, this doesn't work without Javascript enabled. But it's way better than pasting all that ugly XML.

css svg and vector-effect="non-scaling-stroke" browser compatibility -...

css svg
Rectangle 27 13

<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-0.05 0 1195.1 703" preserveAspectRatio="xMidYMid meet" zoomAndPan="disable" transform="">
    <defs id="svgEditorDefs">
        <line id="svgEditorLineDefs" stroke="black" style="fill: none; vector-effect: non-scaling-stroke; stroke-width: 1px;"/>
    </defs>
    <rect id="svgEditorBackground" x="0" y="0" width="1195" height="703" style="fill: none; stroke: none;"/>
    <path stroke="black" id="e1_circleArc" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" d="M 198 207 a 117.969 117.969 0 1 0 213 8" transform=""/>
    <path stroke="black" id="e4_circleArc" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" transform="" d="M 411.348 215.696 a 349.677 349.677 0 0 0 -110.37 -131.718"/>
    <path stroke="black" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" transform="matrix(-0.182706 -0.983168 0.983168 -0.182706 157.664 417.408)" id="e6_circleArc" d="M 301.799 202.299 a 329.763 329.763 0 0 0 -102.951 -124.781"/>
</svg>

Why would you use a line inside a defs tag? And can't you do this shape in one path not 3 + a rect?

css - How do I create a teardrop in HTML? - Stack Overflow

html css css3 svg css-shapes
Rectangle 27 51

Adding scaledSize to the image/icon and optimized: false to the marker solved it for me.

var image = {
    url: 'https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-marker.svg',
    scaledSize: new google.maps.Size(100, 100),
}

var marker = new google.maps.Marker({
    position: sanfrancisco,
    map: map,
    optimized: false,
    icon: image
});

fantastic, for me those 2 settings works like a charme in IE11

@Johan B Is there like any piece of doc where you've found it or is it standard IE bug solving procedure (just gambling and pure luck and by changing random properties)?

For us, just setting optimized to false did the trick as long as the SVGs had the correct default size inside the files themselves.

javascript - Google Maps SVG marker doesn't display on IE 11 - Stack O...

javascript google-maps google-maps-api-3 svg
Rectangle 27 23

I had a similar problem, and eventually found that you can get SVG and data URI SVG images working, but some parameters that aren't required for other image types are required for SVG. Specifically, once I size and scaledSize parameters on the definition for the icon (along with uri, origin and anchor values), the error went away and the marker rendered. My sample marker is as follows (with svg having already been defined to be the SVG I want as the marker):

var bubbleImage = {
              url: 'data:image/svg+xml;base64,' + Base64.encode(svg),
              size: new google.maps.Size(192, 21),
              scaledSize: new google.maps.Size(192,21),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(88, 53)
          };
          var bubbleMarker = new google.maps.Marker({
              position: feature.position,
              icon: bubbleImage,
              map: window.map,
              optimized: false,
              zIndex: 1
          });

"scaledSize" and "optimized: false" together seems did the tricky.

this only works in Chrome not even FF or IE11

had this problem with IE11 and svg images as files (ordinary url , not dataURIs), so it's not specific to data URIs. @Morio is correct that the two required bits seem to be scaledSize and optimized. Origin, anchor, and size were not required for me.

I can verify that this fixed an SVG error I was getting on IE11 on win8: InvalidStateError. Specifically setting scaledSize on the icon hash and optimized:false on the hash passed to the Marker constructor.

This partially works. addListener mouseover/mouseouts to change/alter the marker cause an error on IE 11-- XML5602: Unexpected end of input. Line: 1, Column 1041. Where on Chrome it works just fine.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

internet explorer - Custom SVG markers won't display in IE 11 - Stack ...

internet-explorer google-maps-api-3 svg google-maps-markers
Rectangle 27 297

In short, font-face is very old, but only recently has been supported by more than IE.

eot is needed for Internet Explorers that are older than IE9 - they invented the spec, but eot is a horrible format that strips out much of the font features.

ttf and otf are normal old fonts, but some people got annoyed that this meant anyone could download and use them.

If you don't want to support IE 8 and lower, and iOS 4 and lower, and android 4.3 or earlier, then you can just use WOFF (and WOFF2, a more highly compressed WOFF, for the newest browsers that support it.)

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

At the same time, iOS on the iPhone and iPad implemented svg fonts.

Then, woff was invented which has a mode that stops people pirating the font. This is the preferred format.

woff
woff2

TTF shouldn't be lighter than WOFF. WOFF is a compressed form of TrueType - OpenType font (ttf and otf).

Maybe I'm wrong I'm sure I recall a flag that disabled something like 'desktop mode' to ensure a user couldn't use the font outside of font-face Perhaps that was an earlier spec?

The point of WOFF is not anti-piracy. TypeKit says, "the two main benefits OpenType/CFF fonts have over TrueType fonts are 1) their smaller file size, and that 2) they require far less hinting information in order to render well in environments that allow some form of anti-aliasing."

From what I see, TTF is lighter than WOFF, so 99% of time there is no reason to use WOFF

@Zelphir tools make it hard to create embeddable fonts with that flag, and your run-off-the-mill designer is programming-illiterate and could only remove the flag if someone designed a Mac app with a shiny "pirate font" button. Moreover, if they are a corporation, you can bring legal charges. If they are some guy with a blog, talk to them, failing that, their host, etc - but keep in mind people who can't buy your font aren't potential costumers anyway, so I'd say free publicity is worth more than the hassle of convincing them to just swap it for the closest thing on dafont.

css3 - Why should we include ttf, eot, woff, svg,... in a font-face - ...

css3 font-face webfonts
Rectangle 27 11

You mention that you are doing this because IE doesn't support SVG.

The good news is that IE does support vector graphics. Okay, so it's in the form of a language called VML which only IE supports, rather than SVG, but it is there, and you can use it.

Google Maps, among others, will detect the browser capabilities to determine whether to serve SVG or VML.

Then there's the Raphael library, which is a Javascript browswer-based graphics library, which supports either SVG or VML, again depending on the browser.

All of which means that you can support your IE users without having to resort to bitmap graphics.

+1 for mentioning raphael, which is definitely a good solution and worth investigating for its excellent implementation of cross browser vector graphics.

Convert SVG image to PNG with PHP - Stack Overflow

php svg imagemagick jpeg gd2
Rectangle 27 11

You mention that you are doing this because IE doesn't support SVG.

The good news is that IE does support vector graphics. Okay, so it's in the form of a language called VML which only IE supports, rather than SVG, but it is there, and you can use it.

Google Maps, among others, will detect the browser capabilities to determine whether to serve SVG or VML.

Then there's the Raphael library, which is a Javascript browswer-based graphics library, which supports either SVG or VML, again depending on the browser.

All of which means that you can support your IE users without having to resort to bitmap graphics.

+1 for mentioning raphael, which is definitely a good solution and worth investigating for its excellent implementation of cross browser vector graphics.

Convert SVG image to PNG with PHP - Stack Overflow

php svg imagemagick jpeg gd2
Rectangle 27 16

There's a workaround for IE - use inline SVG and set pointer-events="none" in SVG. See my answer in How to make Internet Explorer emulate pointer-events:none?

this is a great solution for some cases but i can't use this in my case.

html - css 'pointer-events' property alternative for IE - Stack Overfl...

html css internet-explorer browser cross-browser
Rectangle 27 16

There's a workaround for IE - use inline SVG and set pointer-events="none" in SVG. See my answer in How to make Internet Explorer emulate pointer-events:none?

this is a great solution for some cases but i can't use this in my case.

html - css 'pointer-events' property alternative for IE - Stack Overfl...

html css internet-explorer browser cross-browser
Rectangle 27 6

This code works in IE11:

var img = new Image();
img.onload = function(){
    document.body.appendChild(this);
    alert( 'img: ' + this.offsetWidth + 'x' + this.offsetHeight);
    document.body.removeChild(this);
};
img.src = 'http://upload.wikimedia.org/wikipedia/en/b/b5/Boeing-Logo.svg';

And yes - this solution is not ideal.

This solution worked for me. The problem with the accepted solution to use $.get is that can fall victim to CORS Access-Control headers.

javascript - How can I get width and height of SVG on Image.load in IE...

javascript internet-explorer svg
Rectangle 27 5

It seems Google Maps currently doesn't support using SVGs for marker images. You can have vector marker icons though, by using a Symbol object.

@MikeKormendy Firstly, this was definitely true in Oct 2014 when I wrote this. Secondly (see my answer linked above), while SVG markers did happen to work in some browsers, they weren't officially supported and didn't work in all browsers - you had to use a Symbol for vector icons to work in all browsers. Nothing I can see in the docs suggests that's changed, but if you're sure that Google Maps does now support SVG markers (including in IE11?), a link to support that and provide an update to the above would be more useful than a simple assertion. "Downvote" comes across as pretty rude, too.

Not getting personal nor going to argue here. Just stating why I downvoted - which ultimately helps users see which answers are relevant (or not in this case) based on vote numbers. I have already provided a link to examples in the OPs comments, and instead of duplicating the answer from there in this thread, I simply provided the link in comments (which is the policy on SO)

javascript - Google Maps SVG marker doesn't display on IE 11 - Stack O...

javascript google-maps google-maps-api-3 svg
Rectangle 27 4

Be careful all of the other answers have some problem in IE.

Lets have this situation - button with prepended icon. All browsers handles this correctly, but IE takes the width of the element and scales the before content to fit it. JSFiddle

#mydiv1 { width: 200px; height: 30px; background: green; }
#mydiv1:before {
    content: url("data:url or /standard/url.svg");
}
#mydiv2 { width: 200px; height: 30px; background: green; }
#mydiv2:before {
    content: url("data:url or /standard/url.svg");
    display: inline-block;
    width: 16px; //only one size is alright, IE scales uniformly to fit it
}

The background-image + background-size solutions works as well, but is little unhandy, since you have to specify the same sizes twice.

The result in IE11:

css - Is there a way to use SVG as content in a pseudo element :before...

css svg
Rectangle 27 3

Dont know if it is a solution for you but i usually do it like:

new XMLSerializer().serializeToString(document.querySelector('#b'))

If you want to parse the string again and insert the node in your document:

new DOMParser().parseFromString(svgString, "image/svg+xml")

Evergreen browsers work with the outerHTML spec for SVGs, just not IE and company. This solution works great though. Thanks!

javascript - outerHtml is not working in IE - Stack Overflow

javascript jquery svg
Rectangle 27 5

The key difference is that

causes the browser to use quirks mode. IE does not support SVG in quirks mode.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

causes the browser to be in almost standards mode.

You can turn your doctype into one that will render the SVG in IE9 very easily, just by adding a system identifier, like this:

I don't know whether this will work IE10, but if IE10 follows the HTML5 doctype parsing rules like it should, even the above doctype will cause quirks mode, and therefore may cause SVG not to render.

HTML 4.0 was replaced as a W3C recommendation by HTML 4.01 over thirteen years ago in 1999 so the absolute minimum doctype you should use is

which will cause almost standards mode in HTML5 compliant browsers just like the XHTML doctype you mention does. But that was intended for people switching their sites from HTML 3.2.

Much better would be to ensure that your site works in standards mode. You can do that by using an HTML 4.01 strict doctype like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

That's the current W3C recommendation but it's still a bit long to remember. The shortest string that will do the same job of putting browsers into standards mode is

<!DOCTYPE HTML>

which is why it was chosen for use in HTML5 and later documents.

xhtml - SVG is not rendering in IE 10 with Doctype HTML 4 - Stack Over...

xhtml svg doctype internet-explorer-10 html4
Rectangle 27 5

The key difference is that

causes the browser to use quirks mode. IE does not support SVG in quirks mode.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

causes the browser to be in almost standards mode.

You can turn your doctype into one that will render the SVG in IE9 very easily, just by adding a system identifier, like this:

I don't know whether this will work IE10, but if IE10 follows the HTML5 doctype parsing rules like it should, even the above doctype will cause quirks mode, and therefore may cause SVG not to render.

HTML 4.0 was replaced as a W3C recommendation by HTML 4.01 over thirteen years ago in 1999 so the absolute minimum doctype you should use is

which will cause almost standards mode in HTML5 compliant browsers just like the XHTML doctype you mention does. But that was intended for people switching their sites from HTML 3.2.

Much better would be to ensure that your site works in standards mode. You can do that by using an HTML 4.01 strict doctype like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

That's the current W3C recommendation but it's still a bit long to remember. The shortest string that will do the same job of putting browsers into standards mode is

<!DOCTYPE HTML>

which is why it was chosen for use in HTML5 and later documents.

xhtml - SVG is not rendering in IE 10 with Doctype HTML 4 - Stack Over...

xhtml svg doctype internet-explorer-10 html4
Rectangle 27 27

There is a bug in IE that causes paths with markers to render improperly. The original code with markers removed renders without problem.

There are three solutions:

Option 2, though a little ugly, is probably the most viable.

I pulled the css and javascript from the original example and placed them in jsfiddle. The links displayed correctly in Chrome 26 (this was my sort of control test), but didn't display at all in IE 10 (as expected). I then edited the javascript which dealt with the creation of the links according to the answer James gave:

var path = svg.append("svg:g")
    .attr("fill", function(d) { return "none"; }) /*new*/
    .attr("stroke-width", function(d) { return "1.5px"; }) /*new*/
    .attr("stroke", function(d) { return "#666"; }) /*new*/
    .selectAll("path")
    .data(force.links())
    .enter().append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

This did add the specified attributes to the <g> element, but had no effect on the display of the "live" graph. (Checking back now, I've noticed the "static" graph displays links in IE10 even without these attributes as seen here.)

I was able to make the links visible in IE10 (even directly in the original example) by using IE's developer toolbar. I found one of the <path> tags in the DOM, then in the Style tab to the right unchecked and rechecked the "path.link" style.

This gets the links to show, but any subsequent interaction with the graph disconnects the markers from the ends of the links. They simply stay in place, and I've found nothing that will get them to re-attach.

The only source of information I can find that seems relevant is this SO post: Element doesn't appear in IE7 until I edit it through Developer Toolbar However, I'm fairly new to svg, so I haven't the slightest idea how to port the fix described there to svg (that fix was for an html element)

Maybe this will help someone get headed in the right direction?

P.S. I know this isn't exactly an answer, and I would have just posted this as a reply to James' answer, but it seems I don't have enough reputation to do that. =\

As it turns out, this issue is related entirely to markers. This fiddle is the original code but with markers removed, and the links show up just fine. The marker issue has been documented before and is a serious bug of IE10. Why it also causes the links to disappear, I don't know.

This fiddle offers a work-around. It's not the cleanest solution as I've encoded each marker directly in its link's path, but it works.

If anyone can find a work-around for the marker issue itself, that would be better, and it should additionally be posted as an answer to the other marker question.

This bug has been reported to Microsoft, but so far they seem to have denied or ignored it. Please go to this post on Microsoft's issue tracker website and click the link indicating you can reproduce this bug. Maybe we can get their attention?

I don't know about the OP, but this was certainly useful for me. And with the amount of information you've provided, it's better as a separate answer anyway, because there's a limit to what you can put in the comments. +1

I happened to find a solution that works... somewhat. Take a look at this fiddle. It still has the disembodied marker issue, but the links are visible. (Also, to James, I'm glad the information will be useful. I didn't know there was a limit since I hadn't had the opportunity to comment before.)

I don't currently have access to a system with IE10, and I can never get javascript to work with NetRenderer which is why I've been testing with static markup. But since the problem seems to be js related, based on your findings, that explains why I can't reproduce it. Unfortunately it also means I can't confirm your solution.

@dan-bailiff Here's an example of putting square markers in the middle of straight lines. The formulas it uses should be a little easier to digest. Let me know if it helps you out.

javascript - internet explorer 10 not showing svg path (d3.js graph) -...

javascript internet-explorer svg d3.js internet-explorer-10
Rectangle 27 3

Some browsers(IE and safari) will be use a default size to SVG if you don't put a certain height and width. That what is happening here. You are right, the "intrinsic aspect ration" is requiring another Dom and css and will be nice if we can overcame this.

There is a solution to this, you can calculate and put the right height to padding-bottom and this will give the right "unknown height" you want. You can see a full solution here: http://codepen.io/tomkarachristos/pen/GZPbgZ

<!--
xMidYMin: Align the midpoint X value of the element's viewBox with the midpoint X value of the viewport.
slice : the entire viewport is covered by the viewBox and the viewBox is scaled down as much as possible,
height: if you dont set >= 1px some browsers will not render anything.
-->
<div>
    <svg viewBox="0 0 100 10" preserveAspectRatio="xMidYMin slice"
         width="100%" style="height: 1px;overflow: visible;
         /*without js:padding-bottom:55%*/"><text>hello</text>
  </svg>
    <svg viewBox="0 0 100 10" preserveAspectRatio="xMidYMin slice"
         width="100%" style="height: 1px;overflow: visible;"><text>Age</text>
  </svg>
</div>

and javascript:

/*
Here we do the hack.
With the math type: percent * height/width
we are adjust the total height of an element who is depend in width using the padding-bottom.
You can put an inline padding-bottom if you want in html.
*/

$(function() {
  $('svg').each(function() {
    var svg = $(this);
    var text = svg.find('text');
    var bbox = text.get(0).getBBox();
    //the hack
    var calcString = "calc(100% * " + bbox.height/bbox.width + ")";
    svg.css("padding-bottom",calcString);

    svg.get(0).setAttribute('viewBox',
                           [bbox.x,
                            bbox.y,
                            bbox.width,
                            bbox.height].join(' '));
  });
});

javascript - SVG with viewBox and width is not scaling height correctl...

javascript html css svg
Rectangle 27 3

We fixed the bug now, see the the linked code at https://github.com/highslide-software/highcharts.com/issues/1978. While the element was created with createElementNS, only IE9 and IE10 actually created a visible attribute for it. So the workaround was to add the attribute as well if not present.

Thanks! Applied the patch and everything's working fine now.

internet explorer - Highcharts adds duplicate xmlns attribute to SVG e...

internet-explorer svg highcharts xml-namespaces
Rectangle 27 120

WebBrowser control will use whatever version of IE you have installed, but for compatibility reasons it will render pages in IE7 Standards mode by default.

If you want to take advantage of new IE9 features, you should add the meta tag <meta http-equiv="X-UA-Compatible" content="IE=9" > inside the <head> tag of your HTML page.

This meta tag must be added before any links to CSS, JavaScript files etc that are also in your <head> to work properly though (only other <meta> tags or the <title> tag can come before it).

And in there add 'myApplicationName.exe' with value '9000' to force the WebBrowser control to display pages in IE9 mode. Though there are other values you can use too too, note that these docs aren't entirely accurate as it does not seem possible to get a page to render in IE 8 mode whatever value you use.

Adding the registry key to the same path in HKCU instead of HKLM will also work - this is useful as writing to HKLM requires admin privileges where as HKCU does not.

I tried the meta tag but it would not work. I was getting an error message stating "HTML1115: X-UA-Compatible META tag (IE=9) ignored because document mode is already finalized.", which lead me to the webpage evolpin.wordpress.com/2011/02/25/. The solution was then to ensure that the meta tag was the first element inside the <head> block.

Be careful, if you are running 32-bit applications (that call the 32-bit MSIE) on a 64-bit Windows, the registry entry should be added to HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION instead.

I was rendering html through xsl/xslt and the regedit didn't worked for some reason... The meta did the trick. Thanks!

c# - Will the IE9 WebBrowser Control Support all of IE9's features, in...

c# .net-3.5 browser webbrowser-control internet-explorer-9
Rectangle 27 17

You can use Modernizr to detect simply IE or not IE, by checking for SVG SMIL animation support.

If you've included SMIL feature detection in your Modernizr setup, you can use a simple CSS approach, and target the .no-smil class that Modernizr applies to the html element:

html.no-smil {
  /* IE/Edge specific styles go here - hide HTML5 content and show Flash content */
}

Alternatively, you could use Modernizr with a simple JavaScript approach, like so:

if ( Modernizr.smil ) {
  /* set HTML5 content */
} else {
  /* set IE/Edge/Flash content */
}

Bear in mind, IE/Edge might someday support SMIL, but there are currently no plans to do so.

While this does work, it works for now. The whole point of feature detection and Modernizr is that you don't have to worry about what happens tomorrow. If Edge updates tomorrow with smil support, your code no longer works and you may not even know it.

@Jason I've edited for further info and caution.

html5 - Correct way to use Modernizr to detect IE? - Stack Overflow

html5 cross-browser modernizr