I have a collection of svg files which are going to be used on my site. There is no any problem in modern browsers with showing SVG but we have if we're talking about IE. Is there any way to make IE shows SVG picture? Maybe some jquery/js plugin could do that?
<img src="images/icon.svg" width="32" height="32" alt="" />
I spent a lot of time and still havent found any workarounds :(
Related
On my website, I have several images with an onload and onerror callback
<img onload="imgCallback()" onerror="imgCallback()" class="article-img" src=":assets:/price/12-2.jpg" alt="A chart showing vitamin and mineral content of liver, kidney, spleen, heart, broccoli, kale, banana and apple" />
Some initialization is only done after all images have loaded because I need the full height of the container element after all images are shown.
This works fine on my desktop, however, it seems to not work on some mobile browsers. I have tested this on my Android Chrome browser and it seems to only load images lazily after I scroll far enough down, delaying page initialization that is expected to happen on the initial loading of the website.
I can't really think of any other way of solving this as I need the full width of the container post image loading, something I don't know statically, therefore I am asking if there is a way to signal to the browser that it should eagerly load images?
Found an answer here.
I simply had to add loading="eager" to my image tags.
Before I give up and build my solution completely in SVG, I thought I would throw this out to the StackOverflow crowd to see if I missed anything.
In a current project, I have a .png that represents the faceplate of a real-world water irrigation controller. The SVG acts an overlay and contains the coordinates of all the pressable buttons and virtual LEDs that blink when necessary on the real world device, interacting with a Node application that is talking to the 'real' water controller, and the .png is an embedded background image. (see code below) We programmatically (via Javascript) change the overlay SVG and the faceplate image on entry into the page, depending on earlier user input.
Everything works great, we can press buttons on the SVG overlay and the real world controller responds, and vice-versa.
The problem comes down to scaling the embedded image. Under Chrome, Firefox, and Opera, I can resize the browser window to various sizes and the SVG and embedded image scale beautifully.
But IE 11+ refuses to play ball, and stubbornly keeps the embedded image at a reduced size.
I think I've googled-to-death everything on the subject of scaling SVGs in IE, and tried various CSS hacks and DOM manipulations, although most seem to apply to embedding the SVG in an HTML img tag, and not an SVG with an embedded image tag.
I've tried removing all width/height from the SVG and use CSS-only; I've tried using 100% width/height in the image tag to (supposedly) allow the viewBox to control it's dimensions; I've tried fixing the width/height to same values of viewBox; I've tried using preseveAspectRatio in both the SVG header and the image. I'm running out of ideas.
Relevant code sample:
<svg class="scaling-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 970 530" preserveAspectRatio="xMidYMid meet" >
<image id="faceplate" xlink:href="../images/TWC-front.jpg" class="svg-content" height="530" width="970" preserveAspectRatio="xMidYMid meet"></image>
<g>
<rect id="rect_textDisplay" x="322" y="157" width="530" height="52" opacity="0" />
<text fill="black" x="326" y="176" id="displine1" xml:space="preserve">Welcome to the Virtual Controller</text>
<text fill="black" x="326" y="198" id="displine2" xml:space="preserve"> ... waiting for connection</text>
</g>
<rect id="dial_irroff" x="39" y="319" opacity="0" width="75" height="25" />
<rect id="dial_manual" x="63" y="287" opacity="0" width="80" height="25" />
<rect id="dial_auto" x="148" y="278" opacity="0" width="50" height="25" />
...
Any ideas or prodding in a direction I might not have considered are greatly appreciated. I would like to keep the solution in the current form as much as possible, because we dynamically change the faceplate depending on user input, and there are about 15 different faceplates to be used between two SVG overlays. It would take quite a bit more time to re-build each faceplate in pure SVG. But I am prepared to do it, if necessary. :(
User llobet's comment above of adding 100% height to the html, body and svg elements seemed to do the trick. Initially I took what worked in the codepen that user Mardoxx asked for and applied it to my CSS and it still did not work. After a few minutes of pruning out all but the most basic of CSS rules and discovered a couple of height: auto;, attributes and removed them or made them 100%, then IE11 started playing nice and scaling as expected. It pays to weed out and scruntinize your CSS until things behave as expected. Thanks to both of you for pushing in the right direction.
Relevant codepen.io: http://codepen.io/digitalmouse/pen/LygOWe
I am trying to solve a problem with internet explorer 10. I made a gif animation in photoshop (its only 1mb) and it works in all browsers well, except, Well take a guess... internet explorer. It looks like there is a pixel delay or rendering problem.
Gif animations of other websites doesn't have the problem. I also tried all kinds off different gif formats. Anyone any ideas?
I used the html img element to display
<img src="database.gif" id="myVideo">
here is printscreen of my pc screen in IE10
This is the gif file (Open this page in IE)
I'm trying to add svg's to my "sheets reader" with the embed html-tag. It works fine in FF, in Chrome, even in IE9, but when I open the page in Safari, it's not scaling and I'm getting scrollbars.
Here's my testing environment: http://www.nie-wieder.net/br/BookReaderDemo/noten.html#page/1/mode/1up
just open it in safari (version 5.1.7, perhaps on mac only?! just got a mac right here) and you'll know what I mean.
So, my Question is: Is there any way to get the svg file at the demo to scale right in Safari?
I searched around here and found nothing to this specific question, so I hope you can help me :)
edit: I can't use img because svg via img-tag are not scriptable :(
You override your browsers default CSS rules for svg tag. Remove width="" and height="" from the svg tag in your .svg file or embed the svg as img instead of embed tag:
<img type='image/svg+xml' src="file.svg" style="width: 100%; height: 100%;" />
I know there are many ways available on internet, I found one with using iepngfix , but to resolve this issue i need to specify width and height to each png image and its too time consuming process for me. Because i have 1000's of png images in my project, Is there any way to resolve this issue without specifying width and height to image tag,
My image tag is :
<img src="myPngImage.png" width="120" height="100" />
You might want to look at CSSPie, I use it personally and so far it works great. I didn't test for images transparency in IE6 but seems to be well-supported http://css3pie.com/documentation/supported-css3-features/#pie-png-fix.
If you must support IE6, then I recommend using something like jquery's capabilities (which will auto detect the width/height of images).
<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
<script type="text/javascript">
DD_belatedPNG.fix('img,div,ul,li,li a,a,input,p,blockquote,span,h1,h2,h3');
</script>
<![endif]-->
download code from here
http://trac.symfony-project.org/browser/plugins/pkToolkitPlugin/trunk/web/js/DD_belatedPNG_0.0.8a-min.js?rev=20453
or
customize-your-blogger.googlecode.com/files/DD_belatedPNG_0.0.8a-min.js