Svg illustration that depending on ending to file url in img tag can has different proportions and hide/show some elements.
Adding `#wide` we get wide proportions and paper plane that flies to the right side and up.
If we add `#narrow` then we see plane going down and proportions are more narrow.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" preserveAspectRatio="xMidYMin meet" viewBox="0 0 745 276">
<defs>
<!--
This adaptable illustration is designed for both wide desktop screens and narrow mobile screens.
A working woman at her desk is a constant part of the illustration. The paper airplane and its
path through the air make the difference.
In the wide version, the plane extends far to the side, making the entire illustration wider.
In the narrow version, the plane goes under the desk, making the illustration narrower but taller.
By default wide version is displayed. You can switch to narrow version by adding a hash suffix to
the file location: #narrow. In CSS, you can use a media or container query to switch between the
two versions for the background property.
The simplest way to check how it works would be save the code that as an SVG file on your computer.
Then, you can open it in your browser by dragging it into the window. You will see default wide
version. Then, in the address bar of your browser, add the suffix "#narrow" to the file location
path and press Enter. Then SVG reloads, and you will see a narrow version.
By default, the SVG root tag has a viewBox property that sets the viewport. This property
represents the wide version. The suffix #narrow triggers the inner view tag with the related narrow
ID value. This view tag has narrow viewport settings in the viewBox property that redefine
the default settings.
There are also styles that hide the paper plane going under the desk part for the wide version and
vice versa: `#narrow:target ~ #usePlaneUp { display: none; }`.
For wide version preserveAspectRation is set to xMidYMin, while for narrow xMidYMid. I don't
remember reason why I did it. Probably to make...
Please Whitelist JSFiddle in your content blocker.
Help keep JSFiddle free for always by one of two ways:
Whitelist JSFiddle in your content blocker (two clicks)
Go PRO and get access to additional PRO features →
Join the 4+ million users, and keep the JSFiddle dream alive.
Ad-free
All ads in the editor and listing pages are turned completely off.
Use pre-released features
You get to try and use features (like the Palette Color Generator) months before everyone else.
Fiddle collections
Sort and categorize your Fiddles into multiple collections.
Private collections and fiddles
You can make as many Private Fiddles, and Private Collections as you wish!
Console
Debug your Fiddle with a minimal built-in JavaScript console.