To expand on [Tobias Snoad's answer][1], picking up the pen with the **Move** command and drawing a second shape *in the opposite direction* (as [Brian Hempel pointed out][2]), will remove that section from the original path.  This is due to the [`fill-rule:evenodd`][11] (default) as explained in [this answer][12].

Here's an example that will draw a 10x10 box and then reverse a 6x6 box inside it:



    <svg xmlns="http://wwww3org/2000/svg" height="200" viewBox="0,0,10,10">
      <path d="M 0,0 h 10 v 10 h -10 z
               M 2,2 v  6 h  6 v  -6 z" /> 
    </svg>

Which will produce the second box in the image below, with each point numbered and arrowed so you can see direction:

[![Path Orientation][3]][3]

### Here's a running demo is Stack Snippets 





    svg path.shape {
      fill: green;
      stroke: #1b1b1b;
      stroke-width: .5px;
    }
    svg path.arrow {
      fill: yellow;
      stroke: black;
      stroke-width: .1px;
    }
    svg text {
      font-size: .8px;
      font-family: monospace;
      stroke: navy;
      stroke-width: .1px;
      text-anchor: middle;
      alignment-baseline: middle;
    }
    svg circle {
      r: .5;
      stroke: navy;
      stroke-width: .1px;
      fill: yellow;
    }



    <svg xmlns="http://wwww3org/2000/svg" height="200" viewBox="-2,-2,14,14">

      <defs>
        <marker id='arrow' orient="auto"  
              refX='-.9' refY='1'
              markerWidth='2' markerHeight='2' >
          
          <path d='M 0,0 V 2 L 1,1 Z' class="arrow"/>
        </marker>
      </defs>    

      <path d="M 0,0 h 10 v 10 h -10 z
               M 2,2 h  6 v  6 h  -6 z"  
            marker-mid='url(#arrow)' class="shape" />
                                 
        <circle cx="0" cy="0" />                  
        <text    x="0"  y="0" > 1</text>    
        <circle cx="10" cy="0" />                  
        <text    x="10"  y="0" > 2</text>  
        <circle cx="10" cy="10" />                  
        <text    x="10"  y="10" > 3</text>  
        <circle cx="0" cy="10" />                  
        <text    x="0"  y="10" > 4</text>  
        <circle cx="2" cy="2" />                  
        <text    x="2"  y="2" > 5</text>  
        <circle cx="8" cy="2" />                  
        <text    x="8"  y="2" > 6</text>  
        <circle cx="8" cy="8" />                  
        <text    x="8"  y="8" > 7</text>  
        <circle cx="2" cy="8" />                  
        <text    x="2"  y="8" > 8</text>  
    </svg>

    <svg xmlns="http://wwww3org/2000/svg" height="200" viewBox="-2,-2,14,14">
     
      <path d="M 0,0 h 10 v 10 h -10 z
               M 2,2 v  6 h  6 v  -6 z" 
            marker-mid='url(#arrow)' class="shape" /> 
       
        <circle cx="0" cy="0" />                  
        <text    x="0"  y="0" > 1</text>    
        <circle cx="10" cy="0" />                  
        <text    x="10"  y="0" > 2</text>  
        <circle cx="10" cy="10" />                  
        <text    x="10"  y="10" > 3</text>  
        <circle cx="0" cy="10" />                  
        <text    x="0"  y="10" > 4</text>  
        <circle cx="2" cy="2" />                  
        <text    x="2"  y="2" > 5</text>  
        <circle cx="2" cy="8" />                  
        <text    x="2"  y="8" > 6</text>      
        <circle cx="8" cy="8" />                  
        <text    x="8"  y="8" > 7</text>  
        <circle cx="8" cy="2" />                  
        <text    x="8"  y="2" > 8</text>  
    </svg>




### SVG Path Command Refresher 

**Two Variations**:

* `M 100,150` Uppercase (**Absolute**) - Move to *exact coordinates* `100,150` (*x,y*)
* `m 100,150` Lowercase (**Relative**) - Move the pen `100` down and `150` right of where you are

**Straight Commands**:

* <code>M <i>x,y</i></code> - Pick the pen up and **M**ove it to the point *`x,y`*
* <code>L <i>x,y</i></code> - Draw a straight **L**ine to the point *`x,y`*
* <code>H <i>x</i></code> - Draw a line **H**orizontally to the right by *`x`*
* <code>V <i>y</i></code> - Draw a line **V**ertically down by *`y`* 
* `Z|z` - Closes the path by drawing a straight line back to the start (last M location)  
  **NOTE**: `Z` is *completely optional* - it's just a shortcut to get back to the starting point

**Curved Commands**:

* <code>C <i>cX1,cY1 cX2,cY2 eX,eY</i></code> - Draw a Bezier **C**urve based on *Two* bezier controls point and end at the coordinates *`eX,eY`*
* <code>S <i>cX2,cY2 eX,eY</i></code> - Draw a **S**implifed Curve based on the previous `S|C` control point and *One* specified bezier control point and end at the coordinates *`eX,eY`*
* <code>Q <i>cX2,cY2 eX,eY</i></code> - Draw a **Q**uadratic Curve based on *One* bezier control point and end at the coordinates *`eX,eY`*
* <code>T <i>eX,eY</i></code> - Draw a **T**erminal Quadratic Curve based on the previous bezier control point and end at the coordinates *`eX,eY`*
* <code>A <i>rX,rY rotation, arc, sweep, eX,eY</i></code> - Draw an Elliptical **A**rc for an oval with the specified width *`rX`* and height *`rY`*.  Define the *`rotation`* with degrees and direction with 0|1 for *`arc`* and *`sweep`* and end at the coordinates *`eX,eY`*

> **TIP**: In most instances you can simplify the precision of any automatically generated path points without sacrificing any human discernibility, even when scaled heavily. You can do a regex [find **`([0-9]*)(\.[0-9]*)`** and replace with **`$1`**][6] to remove any trailing decimals.  You can also format each command on it's own line with [find **`\s*([a-zA-z])\s*`** and replace with **`\n$1 `** ][7].

### Further Reading:

* [MDN - SVG Tutorial Paths][4]
* [The SVG `path` Syntax: An Illustrated Guide][5]
* [How to place arrow head triangles on SVG lines?][8]
* [How To Create SVG Arrowheads and Polymarkers][9]
* [SVG center text in circle][10]



  [1]: https://stackoverflow.com/a/14575057/1366033
  [2]: https://stackoverflow.com/questions/3560835/cut-out-one-svg-path-out-of-another-one#comment53137682_14575057
  [3]: https://i.stack.imgur.com/pXu8G.png
  [4]: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
  [5]: https://css-tricks.com/svg-path-syntax-illustrated-guide/
  [6]: https://regexr.com/3iu1s
  [7]: https://regexr.com/3n9g0
  [8]: https://stackoverflow.com/q/11808860/1366033
  [9]: https://vanseodesign.com/web-design/svg-markers/
  [10]: https://stackoverflow.com/q/28128491/1366033
[11]: https://www.w3.org/TR/SVG/images/painting/fillrule-evenodd.svg
[12]: https://stackoverflow.com/a/7716523/1366033

I have several SVG paths looking like this:

    M204.21121687607624,196.94037184487675L329.92080751248244,195.46306542867487A130,130,0,0,0,244.46261863233696,77.83995929783192Z
    M198.39145828733604,195.04941765207442L235.83285625620988,75.03597952801854A130,130,0,0,0,97.55860203112616,119.9640082076644Z

I now want to add another path, but, instead of adding it to the shape, cut it out from the previous paths. How can I accomplish this?

I couldn't find any information on this in the SVG docs - thanks for your help!

Cut out one SVG <path> out of another one

This is a byproduct of applying both padding and a border-radius to the same element in some browsers (mostly IE and safari). The border-radius changes the curvature of the border component of the box model, which surrounds the padding component. 


In addition to the other answers, another interesting thing that seems to fix the issue is *adding a border line*.   If you don't want to see the border, you could use `border: 1px solid transparent`, like this:



    .invisible-border {
        border: 1px solid transparent;
    }

### [Demo in jsFiddle][fiddle]

![screenshot][screenshot]

[fiddle]: http://jsfiddle.net/KyleMit/NET9c/
[screenshot]: http://i.imgur.com/6qFWplu.png

I'm having trouble trying to get a radius on images. I've simplified my problem and exaggerated the variables for demonstration purposes.

**CSS**:



    div.wrap img {
        -moz-border-radius: 50px;
             border-radius: 50px;
    }
    img.pic {
        padding: 15px 25px 35px 45px;
    }

**HTML**: 



    <div class="wrap">
        <img class="pic" src="http://i.imgur.com/UAef0.jpg"
             width="300" height="300" />
    </div>

If I remove the padding, poof, pretty corners.
If it helps, there's a reason why they're in two different classes. "wrap" can have more than one "pic" in it. Sometimes they'll be of the same class, other times they wont, sort like this:



    img.left_pic  { float:left;  padding:5px 10px 5px 5px; }
    img.right_pic { float:right; padding:5px 5px 5px 10px; }

Any help or insight would be appreciated.

jsFiddle: [http://jsfiddle.net/NwfW6/][1]


  [1]: http://jsfiddle.net/NwfW6/



**Edited for a solution:**


[This](http://jsfiddle.net/NwfW6/29/) was more or less what I basically was trying to do. I think I was having a 'duh' moment. I'm sure now the declaration I needed to used was **margin** *not* **padding**. Another Thanx to GGJ for reminding me how to go about it the right way. And what Jan said about adding padding to an 'img' tag making no sense, It doesn't. My bad.

Border-radius and padding not playing nice

This is an issue reported to Microsoft Connect.  
From [SSRS 2008 How to get the best image quality possible?](https://connect.microsoft.com/SQLServer/feedback/details/493441/):

> The image behavior you see in PDF is a result of some image conversions that the PDF renderer does, based on how the PDF specification requires that serialize images into PDF.
>
>We know it's not ideal, and we classify the loss of image quality as a product issue. Therefore, it's difficult to really say what to do to get the best quality image. 
>
>**Anecdotally, I have heard that customers have good results when the original image is a BMP**

I have a report that renders images (jpg) that have been collected from various sources.  This works fine within the report viewer, and when exporting via Excel.  

However, when exporting to PDF, about 5% of the images are rendered incorrectly as can be seen below, with the original on the left, and what is rendered on the right;

![enter image description here][2] ![rendered image image][1]

**I find that if I open up one of these images in mspaint, and just click save, on the next report-run the image is now rendered correctly.**

Are there any rules as to what image properties/format are valid for SSRS to render the image correctly within a PDF?  Essentially I'd like to somehow find these images that will render incorrectly before the report is run and fix them prior...

  [1]: http://i.stack.imgur.com/jjNnU.png
  [2]: http://i.stack.imgur.com/hij8l.png

SSRS can't properly render *some* images within PDF

Use `background-size: cover` in **CSS** on the `HTML` element



    html {
        background: url(http://i.imgur.com/tENv1w4.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
                background-size: cover;
    }

See this fiddle:

[jsFiddle](http://jsfiddle.net/KyleMit/n5qfa)
====

I have an image for a website and I wish to resize it so it covers ANY given screen.

Note:
    
 - I don't want the scrollbars to appear.
 - I am trying to resemble something like the following website

     http://frontrow-demo.squarespace.com/

The only solution I can think of was re-sizing the height and width but that makes the scroll bars appear.  I am guessing its a CSS solution I am struggling to create.

Edit:

This is the code I tried, but its "Zooming" the pic to make it stretch across the screen. I would like it to resize it so the quality and the actual pic would show up.

    #bg {
      position: fixed; 
      top: 0; 
      left: 0; 
    
      min-width: 100%;
      min-height: 100%;
    }



How can I resize an image so it fits the entire window?

This question shows *very little* by the way of effort, but just to get you *started*, you could use [Bootstrap Scrollspy](http://getbootstrap.com/javascript/#scrollspy) and then hide any links without the `active` class.

If this doesn't meet your needs, please use this as a starting point to ask a more focused question in the future.

# [Demo in Fiddle][fiddle]

1. First, setup all of your section headers as list items like this:

    
    
        <div id="sidebar">
            <ul class="nav">
                <li><a href="#Content1">Content 1</a></li>
                <li><a href="#Content2">Content 2</a></li>
                <li><a href="#Content3">Content 3</a></li>
            </ul>
            Lorem Ipsum
        </div>

2. Then add scrollspy to the page, targeting the `#sidebar` you just created

    
    
        $('body').scrollspy({ target: '#sidebar' })

3. Then style all `li`s as hidden, but override the active one to make it visible:

    
    
        #sidebar li        { display: none;  }
        #sidebar li.active { display: block; }

### Screenshot: 

[![screenshot][screenshot]][fiddle-demo]


[fiddle]: http://jsfiddle.net/KyleMit/U7d2y/
[fiddle-demo]: http://jsfiddle.net/KyleMit/U7d2y/show
[screenshot]: http://i.imgur.com/YloVVYe.gif

I have a fixed div box on the right, and I want to make it so that as the page scrolls, the content in the box changes according to the content on the left that corresponds to it using I need some help because I don't know how to do this using jQuery.

Here is an example animation of what I mean:
![\[Example\]()][1]


  [1]: http://i.stack.imgur.com/NKhdB.gif

Change div content while scrolling using jQuery

## Demo of the Problem:

[Not all browsers react the same][timkadlec], but typically browser's will load content from a `src` attribute, regardless of whether some other CSS rule renders that element as invisible.

Here's a baseline example:



    <img class="visible-xs img-responsive" src="http://placehold.it/768x150" />
    <img class="visible-sm img-responsive" src="http://placehold.it/992x150" />
    <img class="visible-md img-responsive" src="http://placehold.it/1200x150"/>
    <img class="visible-lg img-responsive" src="http://placehold.it/2000x150"/>

[**Demo in jsFiddle**][Demo 1] 

Whenever I refresh the page, the browser loads all images, even ones that are initially invisible:

![load-all][load-all]



## Background Image + Media Queries

This tutorial on [Simple Responsive Images With CSS Background Images][background-images] goes into more depth, but the basic solution works like this:

Create a simple div:



    <div class="responsiveBackgroundImage" id="myImage" ></div>

And then sub in the correct background image depending on the screen size:

We'll probably want *all* the background images to share a couple basic properties like this:



    .responsiveBackgroundImage { 
        width:100%;
        background-size: 100%;
        background-position: 50% 0%;
        background-repeat: no-repeat;
    }   

Then replace the `background-image` property  for this particular element at each resolution:



    #myImage {background-image: url(http://placehold.it/768x150); }
    @media (min-width: 768px)  { #myImage { background-image: url(http://placehold.it/992x150); }}
    @media (min-width: 992px)  { #myImage { background-image: url(http://placehold.it/1200x150);}}
    @media (min-width: 1200px) { #myImage { background-image: url(http://placehold.it/2000x150);}}

[**Demo in jsFiddle**][Demo 2]     



## Replacing Images with Javascript

Due to limitations with using background images, you might decide to use a real `img` element and then just dynamically load the images.  Rather than loading the element itself, you can do something similar to what angular does with [`ng-src`][ng-src] when evaluating an expression that resolves to a url.  When the browser loads each element, it wouldn't be able to find the file location of `src="{{personImageUrl}}"`.  Instead, Angular saves the intended url as a data attribute and then loads when appropriate.

First, take each of your images and prefix the `src` attribute with `data-`.  Now the browser won't automatically start implementing anything, but we still have the information to work with.



<pre><code>&lt;img class=&quot;visible-xs img-responsive&quot; <b>data-</b>src=&quot;http://placehold.it/768x150&quot;/&gt;
</code></pre>


Then query for all the dynamic images we'll eventually want to load.



    $dynamicImages = $("[data-src]");

Next, we're going to want to capture window resize events, and on the very first page load, we'll trigger one just so we can make use of the same code.  Use a function like this:



    $(window).resize(function() {
        // Code Goes Here
    }).resize();

Then check if each dynamic image is visible.  If so, load the image from the data attribute and remove it from the array so we don't have to keep checking and loading it.

    $dynamicImages.each(function(index) {
        if ($(this).css('display') !== 'none') {
            this.src = $(this).data('src');
            $dynamicImages.splice(index, 1)
        }
    });

[**Demo in jsFiddle**][Demo 3]  

[Demo 1]: http://jsfiddle.net/KyleMit/tbq5kesc/0/
[Demo 2]: http://jsfiddle.net/KyleMit/tbq5kesc/3/
[Demo 3]: http://jsfiddle.net/KyleMit/tbq5kesc/2/

[ng-src]: https://docs.angularjs.org/api/ng/directive/ngSrc

[timkadlec]: http://timkadlec.com/2012/04/media-query-asset-downloading-results/
[load-all]:http://i.imgur.com/QBuNgDM.png
[background-images]: http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/

I'm running Twitter Bootstrap 3.2.

My page has a banner image for every breakpoint. That means code like this:

    <img class="visible-xs img-responsive" src="headline-768px.jpg">   (128kb)
	<img class="visible-sm img-responsive" src="headline-992px.jpg">   (144kb)
    <img class="visible-md img-responsive" src="headline-1200px.jpg">  (264kb)
    <img class="visible-lg img-responsive" src="headline-2000px.jpg">  (380kb)
    
The main purpose of having 4 different images is so that mobile devices don't need to download the larger versions. But Bootstrap preloads all the versions regardless of screen size, even if they're hidden at the current breakpoint. This amounts to hundreds of unnecessary kb for every viewer.

Is there a way around this?

Prevent Bootstrap from preloading all the hidden-* images

### Update 2020 for WSL2

If you're using this with WSL2, docker images will be maintained inside of your [wsl drive][1] available at **`\\wsl$\`** per this [github issue][2]:


* **Windows**: `\\wsl$\docker-desktop-data\mnt\wsl\docker-desktop-data\data\docker\volumes`
* **Linux**: `sudo ls /mnt/wsl/docker-desktop-data/data/docker/volumes`

[1]: https://devblogs.microsoft.com/commandline/whats-new-for-wsl-in-windows-10-version-1903/
[2]: https://github.com/microsoft/WSL/issues/4176

NOTE: Am super new to both Windows and Docker

The tutorial I've been using says that they are under `/var/lib/docker/containers` if we're using Linux, but I can't seem to find that on my Windows machine.

Thanks!