JS Bin

Add library

Add library
Run with JS
Save
Share
…

 
<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>SVG background image test</title></head><body>  <table>    <caption>No width or height in SVG</caption>    <tr>      <td><div class="square fixdim">.fixdim.square</div></td>      <td><div class="square onedim">.onedim.square</div></td>      <td><div class="square nodim">.nodim.square</div></td>    </tr>    <tr>      <td><div class="rect fixdim">.fixdim.rect</div></td>      <td><div class="rect onedim">.onedim.rect</div></td>      <td><div class="rect nodim">.nodim.rect</div></td>    </tr>    <tr>      <td><div class="otherrect fixdim">.fixdim.otherrect</div></td>      <td><div class="otherrect onedim">.nodim.otherrect</div></td>      <td><div class="otherrect nodim">.nodim.otherrect</div></td>    </tr>  </table>
  
  <table class="svghaswidth">    <caption>Width and height set in SVG</caption>    <tr>      <td><div class="square fixdim">.fixdim.square</div></td>      <td><div class="square onedim">.onedim.square</div></td>      <td><div class="square nodim">.nodim.square</div></td>    </tr>    <tr>      <td><div class="rect fixdim">.fixdim.rect</div></td>      <td><div class="rect onedim">.onedim.rect</div></td>      <td><div class="rect nodim">.nodim.rect</div></td>    </tr>    <tr>      <td><div class="otherrect fixdim">.fixdim.otherrect</div></td>      <td><div class="otherrect onedim">.nodim.otherrect</div></td>      <td><div class="otherrect nodim">.nodim.otherrect</div></td>    </tr>  </table>    <table class="svghasonlywidth">    <caption>Only width set in SVG</caption>    <tr>      <td><div class="square fixdim">.fixdim.square</div></td>      <td><div class="square onedim">.onedim.square</div></td>      <td><div class="square nodim">.nodim.square</div></td>    </tr>    <tr>      <td><div class="rect fixdim">.fixdim.rect</div></td>      <td><div class="rect onedim">.onedim.rect</div></td>      <td><div class="rect nodim">.nodim.rect</div></td>    </tr>    <tr>      <td><div class="otherrect fixdim">.fixdim.otherrect</div></td>      <td><div class="otherrect onedim">.nodim.otherrect</div></td>      <td><div class="otherrect nodim">.nodim.otherrect</div></td>    </tr>  </table>    <table class="svghasonlyheight">    <caption>Only height set in SVG</caption>    <tr>      <td><div class="square fixdim">.fixdim.square</div></td>      <td><div class="square onedim">.onedim.square</div></td>      <td><div class="square nodim">.nodim.square</div></td>    </tr>    <tr>      <td><div class="rect fixdim">.fixdim.rect</div></td>      <td><div class="rect onedim">.onedim.rect</div></td>      <td><div class="rect nodim">.nodim.rect</div></td>    </tr>    <tr>      <td><div class="otherrect fixdim">.fixdim.otherrect</div></td>      <td><div class="otherrect onedim">.nodim.otherrect</div></td>      <td><div class="otherrect nodim">.nodim.otherrect</div></td>    </tr>  </table>    <table class="svgminminmeet">    <caption>SVG has preserveAspectRatio = xMinYMin meet</caption>    <tr>      <td><div class="square fixdim">.fixdim.square</div></td>      <td><div class="square onedim">.onedim.square</div></td>      <td><div class="square nodim">.nodim.square</div></td>    </tr>    <tr>      <td><div class="rect fixdim">.fixdim.rect</div></td>      <td><div class="rect onedim">.onedim.rect</div></td>      <td><div class="rect nodim">.nodim.rect</div></td>    </tr>    <tr>      <td><div class="otherrect fixdim">.fixdim.otherrect</div></td>      <td><div class="otherrect onedim">.nodim.otherrect</div></td>      <td><div class="otherrect nodim">.nodim.otherrect</div></td>    </tr>  </table>    <table class="svgmidmidmeet">    <caption>SVG has preserveAspectRatio = xMidYMid meet</caption>    <tr>      <td><div class="square fixdim">.fixdim.square</div></td>      <td><div class="square onedim">.onedim.square</div></td>      <td><div class="square nodim">.nodim.square</div></td>    </tr>    <tr>      <td><div class="rect fixdim">.fixdim.rect</div></td>      <td><div class="rect onedim">.onedim.rect</div></td>      <td><div class="rect nodim">.nodim.rect</div></td>    </tr>    <tr>      <td><div class="otherrect fixdim">.fixdim.otherrect</div></td>      <td><div class="otherrect onedim">.nodim.otherrect</div></td>      <td><div class="otherrect nodim">.nodim.otherrect</div></td>    </tr>  </table>    <table class="svmaxmaxmeet">    <caption>SVG has preserveAspectRatio = xMaxYMax meet</caption>    <tr>      <td><div class="square fixdim">.fixdim.square</div></td>      <td><div class="square onedim">.onedim.square</div></td>      <td><div class="square nodim">.nodim.square</div></td>    </tr>    <tr>      <td><div class="rect fixdim">.fixdim.rect</div></td>      <td><div class="rect onedim">.onedim.rect</div></td>      <td><div class="rect nodim">.nodim.rect</div></td>    </tr>    <tr>      <td><div class="otherrect fixdim">.fixdim.otherrect</div></td>      <td><div class="otherrect onedim">.nodim.otherrect</div></td>      <td><div class="otherrect nodim">.nodim.otherrect</div></td>    </tr>  </table>    <table class="svmaxmaxmeet">    <caption>SVG has viewBox numbers equal to desired background size</caption>    <tr>      <td><div class="square fixdim">.fixdim.square</div></td>      <td><div class="square onedim">.onedim.square</div></td>      <td><div class="square nodim">.nodim.square</div></td>    </tr>    <tr>      <td><div class="rect fixdim">.fixdim.rect</div></td>      <td><div class="rect onedim">.onedim.rect</div></td>      <td><div class="rect nodim">.nodim.rect</div></td>    </tr>    <tr>      <td><div class="otherrect fixdim">.fixdim.otherrect</div></td>      <td><div class="otherrect onedim">.nodim.otherrect</div></td>      <td><div class="otherrect nodim">.nodim.otherrect</div></td>    </tr>  </table>  <table class="uneven">    <caption>Uneven background-size</caption>    <tr>      <td><div class="square fixdim">.fixdim.square</div></td>    </tr>    <tr>      <td><div class="rect fixdim">.fixdim.rect</div></td>    </tr>    <tr>      <td><div class="otherrect fixdim">.fixdim.otherrect</div></td>    </tr>  </table>                                </body></html>

Output Auto-run JS

You can jump to the latest bin by adding /latest to your URL

Dismiss x

Keyboard Shortcuts

Shortcut	Action
ctrl + [num]	Toggle nth panel
Require alt key, leaving cmd+1, 2 etc for tab switching.
ctrl + 0	Close focused panel
ctrl + enter	Re-render output. If console visible: run JS in console
Ctrl + l	Clear the console
ctrl + /	Toggle comment on selected lines
ctrl + ]	Indents selected lines
ctrl + [	Unindents selected lines
tab	Code complete & Emmet expand
ctrl + shift + L	Beautify code in active panel
ctrl + s	Save & lock current Bin from further changes
ctrl + shift + s	Open the share options
ctrl + y	Archive Bin
Complete list of JS Bin shortcuts

JS Bin URLs

URL	Action
/	Show the full rendered output. This content will update in real time as it's updated from the /edit url.
/edit	Edit the current bin
/watch	Follow a Code Casting session
/embed	Create an embeddable version of the bin
/latest	Load the very latest bin (/latest goes in place of the revision)
/[username]/last	View the last edited bin for this user
/[username]/last/edit	Edit the last edited bin for this user
/[username]/last/watch	Follow the Code Casting session for the latest bin for this user
/quiet	Remove analytics and edit button from rendered output
.js	Load only the JavaScript for a bin
.css	Load only the CSS for a bin
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently.

public

Bin info

thatemilpro

15 Mar 2015

0viewers

JS Bin features

Pro features

Blog

Help

Donate to JS Bin ❤