Develop Reference

Scaling an embedded <image> inside <svg> in IE 11+

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

Multiple iFrames on site, all resize to a default height

I'm sorry if this question has been already answered, but can't narrow down or ask the question right.
Here goes, I have a client's website that has three embedded iFrames,the website is for Holiday accommodation and uses a Calendar, Booking Enquiry and the floorplans, all come from different vendors.
The problem is they all have different widths and height.
The width in most instances is set to 100% that's fine, but the height is where the problem is, even if I try to set the height to what I want it, it defaults back to a set size.
The default size is 309px and is in two css files needed for the site in general.
Is there a little snippet of code that could over ride that size set in the CSS?
The site in question is here: http://aalen.com.au/aalen1-pims.php
The main area of concern is the Floor plans, they just end up in a smaller iFrame and doesn't show off the potential of those plans. Many thanks

Looking at the page, I can only see one CSS file affecting your iframe, app.css, there are other css files, but none of them change the height of the element.
I assume you're referring to this code from your website.
<iframe frameborder="0" height="400" scrolling="no" src="http://pl.an/aalen-1/embed" width="100%"></iframe>
It looks like you're setting the height in two places, once in app.css with the code:
iframe{
height:390px;
text-align: center;
}
You are also setting the iframe height with the height attribute as seen in the first code example. Try removing the height="400" attribute from your iframe tag and only have the height in the app.css file.
In future you can try using the Firefox developer tools or Chrome developer tools to manipulate the CSS on the page while it is open, in order to see what you need to change, and how it will affect the rest of the content on your page.

SVG pixel difference in chrome and Firefox

I want draw a diagram on a web page . I am planning to use SVG.
I need to draw the diagram in full screen. So I am using the availHeight and availWidth to find the height and width of the client screen and plan to scale it accordingly .
Now my screen is 1920 *1080 resolution.
For testing I drew a line as follows
<svg height="500" width="1920">
<line x1="0" y1="50" x2="1900" y2="50" style="stroke:rgb(255,0,0);" />
</svg>
My problem is in chrome the line overflows the screen and showing a scrollbar
but in firefox it is showing correctly with in the screen
I need a consistent output on both browsers .
Please help me

Why u are not makeing it responsive as an SVG? I would make a container div and make the svg responsive.
Here is a good description:
http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

how to set svg as a background image [duplicate]

This question already has answers here:
Stretch and scale a CSS image in the background - with CSS only
(22 answers)
Closed 8 years ago.
I am new to web development. What I was trying to do was build an adaptive web site. I decided to use .svg for many of my images. My question is - Is there any way to use .svg as a background image using the css style sheet and keep it adaptive and scale. I wanted to be able to use media queries to keep the mobile portion of the web site smaller with less images. The olny problem is, is that I want my .svg to be able to scale (grow bigger and smaller with the web page). I have found a way to do this as an inline image but that will always require me to load all the images from the start of loading. I don't want the mobile users to have to download all the images because it will slow things down and cost money from there data accounts. I wanted the media queries to pull images in and out of the page via css depending on the screen size of the user. Sorry for the long winded question. Thanks for your time.
PS trying to do this with out using java script if its possible? Are there draw backs to using java script on a web site?

CSS rule
background-image: url('file.svg');
To make your SVG scale you should use percentages for your measurements where possible. For instance if you want to make a gradient that fills the whole background:
file.svg
<?xml version="1.0" encoding="utf-8"?>
<svg width="100%" height="100%">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(192,192,192);stop-opacity:1" />
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad)" />
</svg>
You may also want to look into responsive CSS with media queries if this doesn't provide enough control. You can use it to change it to different SVGs. This CSS section targets screens that are 800px wide at most:
#media screen and (max-width: 800px) {
body {
background-image: url('file800.svg');
}
}
Another tool at your disposal is the background-size rule. It's a CSS 3 rule so you might want to look at the level of support for different browsers.

Google Maps API v3 - Dynamic Ad Size

I am using the Google Maps API as described here, and I added Adsense Ads to the page as defined here. I would like to display different ad sizes based on the screen size of the device. Currently I display one size, that is too small for a desktop browser, and too large for a mobile browser.
Is there any way to go about doing this?

Try checking the javascript properties screen.width and screen.height.

Place them in a container and set the container to be in % width and then set your iframe to be the same. So depending on the screen size your adds will expand to fix the percentage. You may need to fire a resize event to cater for a user minimizing the screen. Example:
Your CSS:
.ad-holder{ width: 33%;height: 200px;} //width can be anything you declare
Your HTML:
<div class="ad-holder">
<iframe src="the map or ad" width="100%" height="200px" frameborder="0" id="map_options_styling_iframe">
</iframe>
</div>