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.
Related
I am trying to get the larger version from the thumbnail of a profile picture on Facebook.
Is this still achievable?
I have found an old solution but no longer works: How to get larger version of Facebook's thumbnail images?
When I try to simply change the size in the url (like old times) I get the following:
URL signature mismatch
For instance, this is the inner element I have inspecting the thumbnail:
<image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="https://scontent.fbri2-1.fna.fbcdn.net/v/t39.30808-1/311117637_10228232448266995_8684249587025903653_n.jpg?stp=cp0_dst-jpg_p60x60&_nc_cat=108&ccb=1-7&_nc_sid=7206a8&_nc_ohc=atKyZ3_RwVoAX8QrTbc&_nc_ht=scontent.fbri2-1.fna&oh=00_AfDr6aLZTybVIlYpRScHNxNi-RzWcNPmGabEnOLvT_wL8Q&oe=63F1CAE0" style="height: 60px; width: 60px;"></image>
However I have no idea how to get the larger size from that link.
If it's not possible, I guess the only way would be to programatically visit each profile and get the link of the larger profile picture.
Consider the following code
<div style="width:480px;border:1px solid red">
<svg viewBox="0 0 100 100">
<path style="stroke:#000" d="M 0 0 100 100" />
</svg>
</div>
As we can see, the line is fully stretched to container. This is expected as per my understanding on viewBox. (in Firefox/Chrome/Edge/Opera)
However, IE11 or below does not strech the line to container. This is because IE11 expect a specific height to SVG.
I do not really care about IE11 support. I am just wondering, whether all modern browsers are consistent in handling svg aspect ratio in the same way firefox/chrome/edge/opera handles it as I showed in first code snippet.
Note: I am not looking for a working around in IE, that is already available in many stackoverlow answers. I just wanted to ensure that, not setting explicit height for my svg does not cause issues in modern browsers
So I currently have a website that loads two different versions depending on screen size: one for desktop and one for mobile. For some reason, the images that I display on the desktop version of my site load on the mobile version.
Is there a way no prevent these images from loading on mobile to increase the performance/load time? Im not talking about the display:none; attribute/hiding the image on mobile, I'm trying to prevent them from even loading all together.
If you want to take a look at the site heres the link: https://rubyredsound.com
Is there a way to prevent these images from loading on mobile to
increase the performance/load time?
Yes.
The srcset attribute is explicitly intended for downloading different image files depending on context.
The one caveat is that you need to declare an image (or a fallback) for every environment.
But that won't prevent you from using as your fallback an equivalent-to-null image (ie. a 1x1 pixel transparent png) declared inline using a base-64 Data URL, which looks like this:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==
srcset and sizes syntax:
The finished <img> element, with files indicated for desktop and mobile environments will look like something like this:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
srcset="/my-image-folder/desktop.png 640w,
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg== 1w"
sizes="(min-width: 641px) 640px,
(max-width: 640px) 1px"
alt="Alternative Text for My Image"
/>
This <img> element will only download and display the desktop.png image if the browser viewport width is 641px or greater.
Otherwise it will display a 1x1 pixel transparent png.
Working Example:
<h2>Narrow and Widen your Browser Viewport in Full Page</h2>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
srcset="https://via.placeholder.com/620x100 620w,
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg== 1w"
sizes="(min-width: 641px) 620px,
(max-width: 640px) 1px"
alt="Alternative Text for My Image"
/>
Browser support
For contemporary browser support for srcset and sizes attributes, see:
https://caniuse.com/#feat=srcset
More Info (plus tutorial)
For more in-depth info and a tutorial on using srcset and sizes to build Responsive Images, see:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
Update in 2021
The Data URL used in the answer above:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==
works, but it's a bit scrappy and pretty unclear what it's supposed to represent (unless you already know what it is).
I've since realised that:
data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'/%3E
works just as well and is both shorter and cleaner and more human-readable.
CSS Media Queries and using background-images
Via CSS you can prevent background images from loading if not active on page load. Keeping that in mind you can hide an image (or any element really) from mobile on and start displaying them through a Media Query.
.myMobileImage {
background-image: url(...);
}
.myDesktopImage {
display: none;
}
#media only screen and (min-width: 768px) {
.myMobileImage {
display: none;
}
.myDesktopImage {
display: inline-block;
background-image: url(...);
}
}
As for personal preference I keep the mobile first approach in mind, declaring mobile styles first and overwriting them with Media Queries afterwards for bigger resolutions.
There are 4 ways that we can fix this issue:
Using picture tag.
Making the image a div with a background.
Lazy loading (native or with a plugin).
Content-visibility.
Details are in : link
I see you added JQuery tagg so :
<figure class="image"></figure>
$(document).ready(function(){
var w = window.innerWidth;
if(w >= 600){
$(".image").html("<img src='big-image.jpg'/>")
}
else{
$(".picture").html("<img src='small-image.jpg'/>")
}
});
There are other great solutions too (not supported in old browsers), take a look at image srcset <img srcset ... />
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
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 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