Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
346 lines (319 sloc) 21.2 KB
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="modernizr.custom.js"> </script>
<link href='http://fonts.googleapis.com/css?family=Arvo:700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="jquery-litelighter.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// all you need to get started
$('pre').litelighter();
});
</script>
</head>
<body>
<div class="test" id="object_technique">
<header class="header">
<a href="#" >
<object class="logo" data="logo.svg" width="186" height="235" type="image/svg+xml">
<img class="logo" src="logo.png" width="186" height="235" alt="Logo Geeks and the City" />
</object>
</a>
<h1>A very nice headling comes here</h1>
</header>
<div class="description">
<h2>Use of <code> &lt;object&gt; </code> and <code> &lt;img&gt; </code> as fallback </h2>
<p> The link is behind the SVG logo, due to the object tag. </p>
<p> The Fallback works fine without JavaScript activated </p>
<pre class="code example" data-lllanguage="html" data-llstyle="light">
&lt;a href="#" &gt;
&lt;object class="logo" data="logo.svg" width="186" height="235" type="image/svg+xml"&gt;
&lt;img class="logo" src="logo.png" width="186" height="235" alt="Logo Geeks and the City" /&gt;
&lt;/object&gt;
&lt;/a&gt;
</pre>
</div>
</div>
<div class="test" id="svg_technique">
<header class="header">
<a href="#svg_technique" >
<svg class="logo" width="186" height="235" >
<g id="buildings">
<path fill="#FA8900" d="M16.521,133.961h46.586V70.055H16.521V133.961z M50.862,82h5.973v6.869h-5.973V82z M49.668,99.32h5.973
v6.869h-5.973V99.32z M49.668,116.64h5.973v6.869h-5.973V116.64z M38.021,82h5.973v6.869h-5.973V82z M36.827,99.32H42.8v6.869
h-5.973V99.32z M36.827,116.64H42.8v6.869h-5.973V116.64z M24.882,82h5.973v6.869h-5.973V82z M23.986,99.32h5.972v6.869h-5.972
V99.32z M23.986,116.64h5.972v6.869h-5.972V116.64z"/>
<path fill="#FA8900" d="M96.391,59.132l2.114,2.118l-1.521,1.521l4.357,21.576l-8.063,6.892l-8.063-7.002l4.313-21.383
l-1.605-1.604l2.229-2.23l0.294-1.804H69.676v76.747h46.586V57.215H96.077L96.391,59.132z M83.114,123.509h-5.972v-6.869h5.972
V123.509z M83.114,106.189h-5.972V99.32h5.972V106.189z M95.955,123.509h-5.972v-6.869h5.972V123.509z M95.955,106.189h-5.972
V99.32h5.972V106.189z M102.824,99.32h5.972v6.869h-5.972V99.32z M102.824,116.64h5.972v6.869h-5.972V116.64z"/>
<path fill="#FA8900" d="M122.234,70.055v63.906h46.586V70.055H122.234z M135.374,123.509H129.4v-6.869h5.974V123.509z
M135.374,106.189H129.4V99.32h5.974V106.189z M135.971,88.869h-5.973V82h5.973V88.869z M148.214,123.509h-5.973v-6.869h5.973
V123.509z M148.214,106.189h-5.973V99.32h5.973V106.189z M149.111,88.869h-5.973V82h5.973V88.869z M161.057,123.509h-5.974v-6.869
h5.974V123.509z M161.057,106.189h-5.974V99.32h5.974V106.189z M161.952,88.869h-5.974V82h5.974V88.869z"/>
</g>
<g id="geeks">
<path fill="#1F1E1F" d="M43.193,159.059h-6.5c-0.25,0-0.46,0.103-0.631,0.306c-0.172,0.202-0.257,0.452-0.257,0.749v9.701
c0,0.295-0.079,0.545-0.234,0.748c-0.156,0.203-0.358,0.305-0.608,0.305h-9.258c-0.249,0-0.46-0.102-0.631-0.305
c-0.171-0.203-0.256-0.453-0.256-0.748v-6.986v-4.156v-6.818c0-0.295,0.085-0.535,0.256-0.721c0.171-0.184,0.381-0.275,0.631-0.275
h5.471h6.266h3.928c0.249,0,0.459-0.104,0.631-0.307c0.171-0.203,0.258-0.453,0.258-0.749v-7.317c0-0.295-0.087-0.545-0.258-0.75
c-0.172-0.199-0.381-0.303-0.631-0.303h-3.74H24.163c-0.312,0.092-2.681,0.33-2.899,0.442l-4.301,5.101
c-0.125,0.258-0.219,0.573-0.281,0.941c-0.063,0.371-0.094,0.702-0.094,0.997v3.382v20.124v0.332c0,0.297,0.031,0.63,0.094,0.999
c0.062,0.368,0.156,0.684,0.281,0.941l4.301,5.102c0.218,0.146,0.483,0.258,0.795,0.332c0.311,0.075,0.591,0.109,0.841,0.109h2.712
h8.465h3.647c0.248,0,0.537-0.034,0.864-0.109c0.327-0.074,0.6-0.186,0.818-0.332l4.303-5.102c0.092-0.258,0.178-0.571,0.256-0.941
c0.079-0.369,0.118-0.702,0.118-0.999v-2.272v-6.319v-4.048c0-0.295-0.086-0.545-0.257-0.746
C43.654,159.162,43.444,159.059,43.193,159.059z"/>
<path fill="#1F1E1F" d="M22.9,141.432h1.263C24.474,141.338,22.65,141.432,22.9,141.432z"/>
<path fill="#1F1E1F" d="M73.612,141.432h-1.498H53.785h-3.414c-0.25,0-0.461,0.104-0.631,0.305
c-0.171,0.205-0.257,0.453-0.257,0.748v2.66v32.154v1.883c0,0.702,0.297,1.055,0.889,1.055h2.806h17.769h2.666
c0.249,0,0.459-0.101,0.631-0.305c0.17-0.203,0.257-0.453,0.257-0.75v-1.828v-2.882v-2.218c0-0.297-0.087-0.544-0.257-0.749
c-0.172-0.203-0.382-0.305-0.631-0.305H70.48H59.911h-1.963c-0.156,0-0.234-0.093-0.234-0.276v-3.215v-0.057v-2.717
c0-0.185,0.077-0.276,0.234-0.276h13.374c0.249,0,0.452-0.101,0.607-0.306c0.156-0.203,0.234-0.453,0.234-0.75v-5.543
c0-0.295-0.078-0.545-0.234-0.748c-0.155-0.203-0.357-0.305-0.607-0.305H57.949c-0.156,0-0.234-0.074-0.234-0.221v-6.044
c0-0.183,0.077-0.276,0.234-0.276h2.618h9.726h3.32c0.249,0,0.459-0.093,0.631-0.277c0.17-0.185,0.257-0.424,0.257-0.722v-2.161
v-1.662v-3.16c0-0.295-0.087-0.545-0.257-0.75C74.072,141.534,73.861,141.432,73.612,141.432z"/>
<path fill="#1F1E1F" d="M104.005,141.432h-1.496h-18.33h-3.413c-0.251,0-0.462,0.104-0.632,0.305
c-0.172,0.205-0.257,0.453-0.257,0.748v2.66v32.154v1.883c0,0.702,0.296,1.055,0.889,1.055h2.804h17.77h2.665
c0.249,0,0.46-0.101,0.632-0.305c0.17-0.203,0.258-0.453,0.258-0.75v-1.828v-2.882v-2.218c0-0.297-0.088-0.544-0.258-0.749
c-0.172-0.203-0.383-0.305-0.632-0.305h-3.133H90.305h-1.964c-0.156,0-0.233-0.093-0.233-0.276v-3.215v-0.057v-2.717
c0-0.185,0.077-0.276,0.233-0.276h13.374c0.249,0,0.45-0.101,0.607-0.306c0.154-0.203,0.232-0.453,0.232-0.75v-5.543
c0-0.295-0.078-0.545-0.232-0.748c-0.157-0.203-0.358-0.305-0.607-0.305H88.341c-0.156,0-0.233-0.074-0.233-0.221v-6.044
c0-0.183,0.077-0.276,0.233-0.276h2.619h9.726h3.319c0.249,0,0.46-0.093,0.632-0.277c0.17-0.185,0.258-0.424,0.258-0.722v-2.161
v-1.662v-3.16c0-0.295-0.088-0.545-0.258-0.75C104.465,141.534,104.254,141.432,104.005,141.432z"/>
<path fill="#1F1E1F" d="M139.775,141.432h-7.762c-0.25,0-0.516,0.075-0.796,0.221c-0.28,0.149-0.499,0.334-0.655,0.555
L118.5,158.948v-16.464c0-0.701-0.297-1.053-0.889-1.053h-6.453c-0.594,0-0.891,0.352-0.891,1.053v36.697
c0,0.702,0.297,1.055,0.891,1.055h6.453c0.592,0,0.889-0.353,0.889-1.055v-8.203c0-0.297,0.055-0.617,0.163-0.97
c0.108-0.351,0.241-0.618,0.397-0.805l3.881-5.045c0.061-0.146,0.139-0.129,0.233,0.056l7.062,15.135
c0.123,0.258,0.311,0.471,0.561,0.637c0.25,0.169,0.499,0.25,0.749,0.25h7.761c0.25,0,0.422-0.081,0.517-0.25
c0.094-0.166,0.077-0.379-0.046-0.637l-10.942-21.176c-0.062-0.148-0.047-0.279,0.047-0.389l11.173-15.578
c0.156-0.221,0.213-0.406,0.164-0.555C140.172,141.506,140.023,141.432,139.775,141.432z"/>
<path fill="#1F1E1F" d="M151.208,150.632c0.17-0.184,0.381-0.276,0.631-0.276h3.04h8.604H168c0.249,0,0.459-0.103,0.631-0.305
c0.171-0.203,0.258-0.451,0.258-0.749v-6.819c0-0.295-0.087-0.543-0.258-0.748c-0.172-0.2-0.382-0.305-0.631-0.305h-4.143h-13
h-0.889c-0.251,0-0.529,0.047-0.843,0.139c-0.312,0.093-0.576,0.195-0.794,0.307l-4.303,5.1c-0.125,0.258-0.217,0.573-0.28,0.941
c-0.062,0.371-0.093,0.702-0.093,0.997v0.999v6.32v1.054c0,0.295,0.031,0.629,0.093,0.997c0.062,0.367,0.155,0.701,0.28,0.997
l4.303,5.1c0.217,0.112,0.482,0.202,0.794,0.278c0.313,0.072,0.592,0.109,0.843,0.109h0.654h5.611h4.207
c0.25,0,0.461,0.104,0.631,0.306c0.172,0.204,0.26,0.454,0.26,0.75v4.6c0,0.298-0.088,0.536-0.26,0.722
c-0.17,0.186-0.381,0.277-0.631,0.277h-4.44h-4.021h-7.436c-0.25,0-0.461,0.104-0.632,0.303c-0.171,0.205-0.257,0.455-0.257,0.75
v6.707c0,0.701,0.296,1.055,0.889,1.055h6.126h10.614h1.029c0.246,0,0.535-0.035,0.863-0.11c0.328-0.074,0.6-0.185,0.817-0.332
l4.517-5.104c0.094-0.258,0.18-0.573,0.26-0.942c0.076-0.37,0.115-0.702,0.115-0.999v-2.716v-4.103v-1.551
c0-0.297-0.039-0.631-0.115-0.999c-0.08-0.371-0.166-0.702-0.26-0.999l-4.517-5.096c-0.216-0.11-0.49-0.202-0.817-0.278
c-0.328-0.073-0.617-0.11-0.865-0.11h-1.123h-6.357h-2.993c-0.25,0-0.461-0.103-0.631-0.305c-0.172-0.203-0.258-0.453-0.258-0.75
v-4.488C150.95,151.059,151.036,150.816,151.208,150.632z"/>
</g>
<g id="the_city">
<path fill="#943982" d="M76.53,208.715c-0.264-0.24-0.395-0.693-0.395-1.363v-9.531h3.01v-3.478h-3.01v-3.799h-4.802v16.915
c0,3.152,1.482,4.73,4.444,4.73h3.369v-3.119h-1.434C77.187,209.07,76.792,208.952,76.53,208.715z"/>
<path fill="#943982" d="M90.147,193.984h-0.753c-1.242,0-2.221,0.287-2.938,0.859v-6.199h-4.802v23.188h4.801v-13.761
c0.048-0.431,0.276-0.646,0.681-0.646h1.972c0.19,0,0.351,0.07,0.484,0.216c0.13,0.144,0.196,0.31,0.196,0.5v13.69h4.802v-13.116
C94.59,195.561,93.108,193.984,90.147,193.984z"/>
<path fill="#943982" d="M106.346,193.984h-4.052c-2.963,0-4.442,1.576-4.442,4.729v8.743c0,3.152,1.479,4.73,4.442,4.73h4.05
c2.961,0,4.443-1.578,4.443-4.73v-1.361h-4.803v1.936c0,0.189-0.065,0.357-0.195,0.502c-0.132,0.144-0.293,0.215-0.484,0.215
h-1.971c-0.191,0-0.352-0.071-0.484-0.215c-0.132-0.145-0.197-0.313-0.197-0.502v-3.653h8.136v-5.663
C110.788,195.561,109.307,193.984,106.346,193.984z M105.986,201.225h-3.332v-3.226c0-0.192,0.064-0.36,0.195-0.503
c0.133-0.145,0.293-0.215,0.485-0.215h1.972c0.19,0,0.351,0.072,0.483,0.215c0.13,0.146,0.196,0.311,0.196,0.503V201.225z"/>
<path fill="#943982" d="M129.171,193.986h-4.049c-2.963,0-4.444,1.576-4.444,4.73v8.743c0,3.153,1.481,4.731,4.444,4.731h4.049
c2.963,0,4.444-1.578,4.444-4.731v-2.51h-4.803v3.083c0,0.189-0.066,0.357-0.197,0.502s-0.293,0.215-0.483,0.215h-1.971
c-0.19,0-0.353-0.07-0.483-0.215c-0.132-0.145-0.197-0.313-0.197-0.502v-9.893c0-0.189,0.065-0.357,0.197-0.498
c0.129-0.146,0.293-0.217,0.483-0.217h1.971c0.19,0,0.351,0.07,0.483,0.217c0.132,0.143,0.197,0.309,0.197,0.498v3.084h4.803
v-2.508C133.615,195.563,132.134,193.986,129.171,193.986z"/>
<path fill="#943982" d="M139.706,187.643c-0.716,0-1.338,0.256-1.862,0.77c-0.525,0.514-0.789,1.136-0.789,1.863
c0,0.729,0.264,1.351,0.789,1.865c0.524,0.514,1.145,0.77,1.862,0.77s1.332-0.25,1.847-0.753c0.512-0.502,0.77-1.122,0.77-1.863
c0-0.739-0.256-1.367-0.77-1.882C141.038,187.898,140.422,187.643,139.706,187.643z"/>
<rect x="137.307" y="194.343" fill="#943982" width="4.801" height="17.489"/>
<path fill="#943982" d="M150.279,190.544h-4.803v16.915c0,3.152,1.48,4.73,4.443,4.73h3.368v-3.119h-1.435
c-0.524,0-0.918-0.118-1.181-0.355c-0.264-0.24-0.394-0.693-0.394-1.363v-9.531h3.01v-3.478h-3.01V190.544z"/>
<path fill="#943982" d="M163.932,194.343l-0.004,12.543c0,0.189-0.064,0.357-0.195,0.501c-0.131,0.145-0.293,0.215-0.483,0.215
h-1.972c-0.191,0-0.354-0.07-0.484-0.215c-0.131-0.144-0.195-0.312-0.195-0.501v-12.544h-4.804v11.971
c0,3.153,1.481,4.729,4.444,4.729h0.754c1.242,0,2.221-0.286,2.938-0.858v3.547c0,0.189-0.064,0.357-0.195,0.502
c-0.133,0.144-0.295,0.215-0.484,0.215h-1.648c-0.19,0-0.352-0.071-0.483-0.215c-0.132-0.145-0.196-0.313-0.196-0.502v-1.146
h-4.658v0.572c0,3.152,1.48,4.73,4.442,4.73h3.584c2.962,0,4.442-1.578,4.442-4.73v-18.813H163.932z"/>
</g>
<g id="and">
<path fill="#9A9796" d="M25.601,195.635c-0.741-1.099-1.97-1.648-3.691-1.648h-0.752c-2.963,0-4.443,1.576-4.443,4.729v8.743
c0,3.152,1.48,4.73,4.443,4.73h0.752c1.72,0,2.95-0.549,3.691-1.646v1.289h4.049v-17.489h-4.049V195.635z M24.847,208.032
c0,0.19-0.065,0.358-0.196,0.502c-0.131,0.144-0.293,0.215-0.483,0.215h-1.972c-0.191,0-0.352-0.071-0.484-0.215
c-0.131-0.144-0.196-0.312-0.196-0.502v-9.892c0-0.19,0.065-0.358,0.196-0.5c0.131-0.146,0.293-0.216,0.484-0.216h1.972
c0.19,0,0.352,0.07,0.483,0.216c0.131,0.144,0.196,0.31,0.196,0.5V208.032z"/>
<path fill="#9A9796" d="M41.405,193.984h-0.753c-1.505,0-2.628,0.42-3.368,1.256v-0.897h-4.373v17.489h4.802l0.002-13.691
c0-0.19,0.065-0.358,0.196-0.5c0.131-0.146,0.292-0.216,0.483-0.216h1.972c0.191,0,0.353,0.07,0.484,0.216
c0.131,0.144,0.196,0.31,0.196,0.5v13.69h4.802v-13.116C45.848,195.561,44.367,193.984,41.405,193.984z"/>
<path fill="#9A9796" d="M57.243,188.645v6.199c-0.741-0.572-1.721-0.859-2.939-0.859v0.002h-0.752
c-2.963,0-4.444,1.576-4.444,4.729v8.743c0,3.152,1.481,4.73,4.444,4.73h0.752c1.72,0,2.951-0.549,3.691-1.646v1.289h4.049v-23.188
H57.243z M57.243,208.032c0,0.19-0.066,0.358-0.197,0.502s-0.293,0.215-0.484,0.215h-1.971c-0.191,0-0.353-0.071-0.484-0.215
s-0.196-0.312-0.196-0.502v-9.892c0-0.19,0.065-0.358,0.196-0.5c0.131-0.146,0.293-0.216,0.484-0.216h1.971
c0.191,0,0.352,0.07,0.484,0.216c0.13,0.144,0.197,0.31,0.197,0.5V208.032z"/>
</g>
<path id="fille" fill="#1B1A1B" d="M114.188,34.249c1.153-9.536-3.078-15.886-5.262-18.439c-2.185-2.555-4.808-5.139-16.523-5.276
c-11.718-0.138-14.733,2.986-18,6.387c-4.038,4.206-5.494,12.72-4.303,19.856c1.299,7.777-0.396,9.14-2.493,10.612
c3.715,2.531,7.791,0.541,8.868-0.425c2.636,3.372,6.14,6.071,10.77,6.071h11.726c4.654,0,8.631-2.332,11.191-5.733
c-0.004,0.011-0.635-0.148-0.641-0.137c1.987,3.866,6.123,1.315,9.433-0.577C118.425,47.04,113.034,43.784,114.188,34.249z"/>
<g id="tetes">
<path fill="#2F2E2F" d="M164.059,41.276l-1.096-17.305c0,0-6.77,7.383-11.156,8.094c-0.145-0.003-0.295,0.064-0.439,0.064h-11.885
c-0.229,0-0.453-0.068-0.676-0.061c-4.388-0.694-11.166-8.061-11.166-8.061l-1.093,17.56c-0.039,0.336-0.438,8.52-0.432,11.419
c0.018,6.711,6.269,12.889,13.86,12.889h10.893c7.594,0,13.57-6.554,13.57-13.266C164.439,52.608,164.12,41.724,164.059,41.276z
M147.581,56.51c-1.604,1.16-3.583,0.787-4.933-0.473c-0.523-0.49-1.607-1.833-0.969-2.763c0.012-0.016,0.041-0.012,0.063-0.018
c0.02-0.021,0.039-0.042,0.063-0.061c0.122-0.161,0.32-0.299,0.512-0.321c1.785-0.206,4.051-0.489,5.785,0.032
C150.271,53.561,148.732,55.676,147.581,56.51z"/>
<path fill="#2F2E2F" d="M55.102,30.208c-3.297-2.483-6.955-3.08-18.174-2.865c-4.5,0.122-7.762,0.813-7.762,0.813
c-0.654-0.971-0.038-1.438,0.83-3.168c-2.808,1.824-3.771,3.407-3.906,4.562c-1.087-0.136-5.44,0.491-5.69-1.475
c-0.398,1.617,0.626,3.371,2.257,4.595c-2.379,0.679-3.592,4.883-3.748,5.493c0.733-0.758,1.152-0.583,1.65-0.827l-1.122,2.991
c-0.815,2.038-1.124,4.213-1.124,6.457c0.467-2.006,1.495-3.813,2.69-5.422v10.333c0,7.361,5.987,14.185,13.771,14.185h11.169
c7.785,0,13.582-6.824,13.88-13.932V41.672c0.597,0.841,1.146,1.694,1.693,2.516C60.61,34.126,58.112,32.474,55.102,30.208z
M37.979,53.93H23.943v-8.362h14.036V53.93z M55.598,53.93H41.563v-8.362h14.035V53.93z"/>
</g>
<foreignObject width="0" height="0" overflow="hidden">
<img class="logo" src="logo.png" width="186" height="235" alt="Logo Geeks and the City" />
</foreignObject>
</svg>
</a>
<h1>A very nice headling comes here</h1>
</header>
<div class="description">
<h2>Use of <code> &lt;svg&gt; </code> and <code> &lt;foreignObject&gt; </code> as fallback </h2>
<p> The link shows </p>
<p> The Fallback works fine without JavaScript activated </p>
<p> This technique is very not flexible, you have to change the whole code when you want to upload a new image</p>
<pre class="code example" data-lllanguage="html" data-llstyle="light">
&lt;a href=&quot;#&quot; &gt;
&lt;svg class=&quot;logo&quot; width=&quot;186&quot; height=&quot;235&quot;&gt;
&lt;!-- the whole code of my SVG file --&gt;
&lt;foreignObject width=&quot;0&quot; height=&quot;0&quot; overflow=&quot;hidden&quot;&gt;
&lt;img class=&quot;logo&quot; src=&quot;logo.png&quot; width=&quot;186&quot; height=&quot;235&quot; alt=&quot;Logo Geeks and the City&quot; /&gt;
&lt;/foreignObject&gt;
&lt;/svg&gt;
&lt;/a&gt;
</pre>
</div>
</div>
<div class="test" id="catching_error">
<header class="header">
<a href="#catching_error" >
<img class="logo" src="logo.svg" alt="A sample SVG button." width="186" height="235" alt="Logo Geeks and the City"
onerror="this.removeAttribute('onerror'); this.src='logo.png'" />
</a>
<h1>A very nice headling comes here</h1>
</header>
<div class="description">
<h2>Use of <code> &lt;img&gt; </code> and catching error as fallback</h2>
<p> The link works </p>
<p> The Fallback relies on JavaScript and does not work when it's deactivated </p>
<pre class="code example" data-lllanguage="html" data-llstyle="light">
&lt;a href=&quot;#catching_error&quot; &gt;
&lt;img class=&quot;logo&quot; src=&quot;logo.svg&quot; alt=&quot;A sample SVG button.&quot; width=&quot;186&quot; height=&quot;235&quot; alt=&quot;Logo Geeks and the City&quot; onerror=&quot;this.removeAttribute(&#039;onerror&#039;); this.src=&#039;logo.png&#039;&quot; /&gt;
&lt;/a&gt;
</pre>
</div>
</div>
<div class="test" id="modernizr_css_fallback">
<header class="header">
<a href="#modernizr_css_fallback" >
<img class="logo" src="logo.svg" width="186" height="235" alt="Logo Geeks and the City" />
</a>
<h1>A very nice headling comes here</h1>
</header>
<div class="description">
<h2>Use of <code> &lt;img&gt; </code> and a CSS image background as fallback </h2>
<p> The link works </p>
<p> We have to cheat, the img will display the alt tag, so we hide the image and apply the fallback to the <code> &lt;a&gt; </code>tag </p>
<p> If JavaScript is desactivated, browser that support SVG will display the PNG fallback </p>
<pre class="code example" data-lllanguage="html" data-llstyle="light">
&lt;a href=&quot;#modernizr_css_fallback&quot; &gt;
&lt;img class=&quot;logo&quot; src=&quot;logo.svg&quot; width=&quot;186&quot; height=&quot;235&quot; alt=&quot;Logo Geeks and the City&quot; /&gt;
&lt;/a&gt;
</pre>
<pre class="code example" data-lllanguage="css" data-llstyle="light">
#modernizr_css_fallback img.logo {
display:none;
}
#modernizr_css_fallback a{
display:block;
width:186px;
height:235px;
background-image: url(logo.png);
background-color:transparent;
text-indent:-999px;
color:transparent;
margin:0 auto;
}
.svg #modernizr_css_fallback img.logo {
display:block;
}
.svg #modernizr_css_fallback a{
background: none;
}
</pre>
</div>
</div>
<div class="test" id="img_modernizr_js_remplacement_bis">
<header class="header">
<a href="#img_modernizr_js_remplacement_bis" >
<img class="logo" src="logo.svg" alt="A sample SVG button." width="186" height="235" data-fallback="logo.png" alt="Logo Geeks and the City" />
</a>
<h1>A very nice headling comes here</h1>
</header>
<div class="description">
<h2>Use of <code> &lt;img&gt; </code> with modernizR SVG detection to provide <code>data-fallback </code> fallback </h2>
<p> The link works </p>
<p> The Fallback relies on JavaScript and does not work when it's deactivated </p>
<pre class="code example" data-lllanguage="html" data-llstyle="light">
&lt;a href=&quot;#img_modernizr_js_remplacement_bis&quot; &gt;
&lt;img class=&quot;logo&quot; src=&quot;logo.svg&quot; alt=&quot;A sample SVG button.&quot; width=&quot;186&quot; height=&quot;235&quot; data-fallback=&quot;logo.png&quot; alt=&quot;Logo Geeks and the City&quot; /&gt;
&lt;/a&gt;
</pre>
<pre class="code example" data-lllanguage="js" data-llstyle="light">
if(!Modernizr.svg) {
var imgs = $('img[data-fallback]');
imgs.attr('src', imgs.data('fallback'));
}
</pre>
</div>
</div>
<div class="test" id="img_modernizr_js_remplacement_nojs">
<header class="header">
<a href="#img_modernizr_js_remplacement_nojs">
<noscript><img class="logo" src="logo.png" alt="A sample SVG button." width="186" height="235" alt="Logo Geeks and the City" /></noscript>
</a>
<h1>A very nice headling comes here</h1>
</header>
<div class="description">
<h2>Use of <code> &lt;img&gt; </code> with JavaScript and <code> &lt; noscript &gt; </code> as fallback </h2>
<p> The link works </p>
<p> If JavaScript is desactivated, browser that support SVG will display the PNG fallback </p>
<pre class="code example" data-lllanguage="html" data-llstyle="light">
&lt;a href=&quot;#img_modernizr_js_remplacement_nojs&quot;&gt;
&lt;noscript&gt;&lt;img class=&quot;logo&quot; src=&quot;logo.png&quot; alt=&quot;A sample SVG button.&quot; width=&quot;186&quot; height=&quot;235&quot; alt=&quot;Logo Geeks and the City&quot; /&gt;&lt;/noscript&gt;
&lt;/a&gt;
</pre>
<pre class="code example" data-lllanguage="js" data-llstyle="light">
if(Modernizr.svg) {
$(&#039;#img_modernizr_js_remplacement_nojs .header a&#039;).html(&#039;&lt;img class=&quot;logo&quot; src=&quot;logo.svg&quot; width=&quot;186&quot; height=&quot;235&quot; alt=&quot;Logo Geeks and the City&quot;/&gt;&#039;);
}
else {
$(&#039;#img_modernizr_js_remplacement_nojs .header a&#039;).html(&#039;&lt;img class=&quot;logo&quot; src=&quot;logo.png&quot; width=&quot;186&quot; height=&quot;235&quot; alt=&quot;Logo Geeks and the City&quot;&gt;&#039;);
}
</pre>
</div>
</div>
<em style="padding:5px 10px;> Thanks to <a href="http://www.geeksandthecity.fr">Geeks and the City</a> for letting me use their logo </em>
<script>
window.onload = function(){
/** for the first img_modernizr_js_remplacement */
if(Modernizr.svg) {
$('#img_modernizr_js_remplacement_nojs .header a').html('<img class="logo" src="logo.svg" width="186" height="235" alt="Logo Geeks and the City"/>');
}
else {
$('#img_modernizr_js_remplacement_nojs .header a').html('<img class="logo" src="logo.png" width="186" height="235" alt="Logo Geeks and the City">');
}
/* for img_modernizr_js_remplacement_bis */
if(!Modernizr.svg) {
var imgs = $('img[data-fallback]');
imgs.attr('src', imgs.data('fallback'));
}
}
</script>
</body>
</html>