Browse files

perform automatic detection of SVG capabilities

We now only have a single page, and the detection of SVG vs PNG is done
in Javascript.  The default is to display PNG, but if the scripting is
enabled and SVG capability is detected, all of the PNG images are
replaced by SVG.  This can be disabled by putting "no-svg" in the
query string.  Additionally, the display of SVG images is fixed on
Webkit (Chrome, Safari, etc.)

Webkit supports SVG img elements (and, in fact, does not display SVG
object elements correctly when zooming), so on these browsers we can
just change the img's src attribute.  Firefox does not support SVG img
elements, so we have to replace these elements with an object element of
the same size.

To simplify the detection of PNG images with an SVG equivalent, rename
all of the PNGs to ".svg.png".

Add a symlink from index-svg.html to index.html for folks with old
  • Loading branch information...
MarkLodato committed Mar 6, 2010
1 parent 5eb3043 commit 11ee97d14e6a5fd8c754c4378cf9235306d857ff
Showing with 74 additions and 53 deletions.
  1. +0 −1 .gitignore
  2. +5 −8 Makefile
  3. +0 −20
  4. +1 −0 index-svg.html
  5. +68 −24 index.html
@@ -3,4 +3,3 @@
@@ -22,19 +22,16 @@ FILES := \
PDF_OUT = $(FILES:=.pdf)
-PNG_OUT = $(PDF_OUT:.pdf=.png)
+PNG_OUT = $(PDF_OUT:.pdf=.svg.png)
SVG_OUT = $(PDF_OUT:.pdf=.svg)
CRUFT = $(FILES:=.aux) $(FILES:=.log)
-EXTRA = index.html index-svg.html
+EXTRA = index.html
-all : pdf png svg index-svg.html
+all : pdf png svg
pdf : $(PDF_OUT)
png : $(PNG_OUT)
svg : $(SVG_OUT)
-index-svg.html : index.html
- ./ $< > $@
gh-pages : all
./publish $(PDF_OUT) $(PNG_OUT) $(SVG_OUT) $(EXTRA)
@@ -44,10 +41,10 @@ gh-pages : all
%.svg : %.pdf
$(PDF2SVG) $^ $@
-%.png : %.pdf
+%.svg.png : %.pdf
$(PDF2PNG) $^ $@
clean :
- $(RM) $(PDF_OUT) $(PNG_OUT) $(SVG_OUT) $(CRUFT) index-svg.html
.PHONY : clean all pdf png svg gh-pages
@@ -1,20 +0,0 @@
-#!/usr/bin/env perl
-$pattern = '<img src=["\']([^\'"]+\.png)["\'](?: ?/?)>';
-while (<>) {
- if (/$pattern/o) {
- $png = $1;
- $dimen = `identify $png`;
- $dimen =~ / (\d+)x(\d+) /;
- $w = $1;
- $h = $2;
- $svg = $png;
- $svg =~ s/\.png$/.svg/;
- $replacement = "<embed src='$svg' width='$w' height='$h' />"
- . "<noembed><img src='$png' /></noembed>";
- s/$pattern/$replacement/;
- }
- s/^(\s*\.other-link-)png/\1svg/;
- print;
@@ -5,19 +5,63 @@
<title>A Visual Git Reference</title>
<style type='text/css'>
.center {text-align: center;}
- .other-link {font-style: italic;}
- .other-link-png {display: none;}
+ #link-to-png, #link-to-svg {font-style: italic; display: none;}
ol ol {list-style-type: lower-alpha;}
+ <script type="text/javascript">//<!--
+ // Webkit browsers can't zoom properly with object tags.
+ if (navigator.userAgent.indexOf("AppleWebKit") > -1) {
+ replacePNG = function(img, src) {
+ var h = img.height, w = img.width;
+ img.src = src;
+ img.height = h;
+ img.width = w;
+ return 0;
+ }
+ } else {
+ replacePNG = function(img, src) {
+ var p = img.parentNode;
+ var obj = document.createElement('object');
+ obj.type = 'image/svg+xml';
+ = src;
+ obj.width = img.width;
+ obj.height = img.height;
+ p.appendChild(obj);
+ p.removeChild(img);
+ return -1;
+ }
+ }
+ var svg_disabled ="no-svg") > 0;
+ // Replace all the PNGs with SVGs on browsers that support them.
+ function replace_all_PNGs() {
+ var hasSVG = document.implementation.hasFeature("", "1.1");
+ if (hasSVG) {
+ if (svg_disabled) {
+ document.getElementById('link-to-svg').style.display = 'block';
+ return;
+ }
+ var images = document.getElementsByTagName('img');
+ for (var i = 0; i < images.length; i++) {
+ var img = images[i];
+ var src = img.src.match(/^(.*\.svg)\.png$/)
+ if (src)
+ i += replacePNG(img, src[1]);
+ }
+ document.getElementById('link-to-png').style.display = 'block';
+ }
+ }
+ //--></script>
+<body onload="replace_all_PNGs();">
<h1 id="top">A Visual Git Reference</h1>
- <p class="other-link other-link-svg">If your browser supports it, the <a
- href="index-svg.html">SVG</a> version of this page might look better.</p>
+ <p id="link-to-png">If the images do not work, you can try the <a
+ href="?no-svg">Non-SVG</a> version of this page.</p>
- <p class="other-link other-link-png">If the images do not work, try the <a
- href="index.html">Non-SVG</a> version of this page.</p>
+ <p id="link-to-svg">SVG images have been disabled.
+ <a href="index.html">(Re-enable SVG)</a></p>
<p>This page gives brief, visual reference for the most common commands
in git. Once you know a bit about how git works, this site may solidify
@@ -44,7 +88,7 @@ <h2 id="contents">Contents</h2>
<h2 id="basic-usage">Basic Usage</h2>
- <div class="center"><img src='basic-usage.png'></div>
+ <div class="center"><img src='basic-usage.svg.png'></div>
<p>The four commands above copy files between the working directory, the
stage (also called the index), and the history (in the form of commits).</p>
@@ -77,7 +121,7 @@ <h2 id="conventions">Conventions</h2>
<p>In the rest of this document, we will use graphs of the following
- <div class="center"><img src='conventions.png'></div>
+ <div class="center"><img src='conventions.svg.png'></div>
<p>Commits are shown in green as 5-character IDs, and they point to their
parents. Branches are shown in orange, and they point to particular
@@ -96,7 +140,7 @@ <h3 id="diff">Diff</h3>
some common examples. Any of these commands can optionally take extra
filename arguments that limit the differences to the named files.</p>
- <div class="center"><img src='diff.png'></div>
+ <div class="center"><img src='diff.svg.png'></div>
<h3 id="commit">Commit</h3>
@@ -108,22 +152,22 @@ <h3 id="commit">Commit</h3>
parent <em>ed489</em>, and then <em>master</em> was moved to the new
- <div class="center"><img src='commit-master.png'></div>
+ <div class="center"><img src='commit-master.svg.png'></div>
<p>This same process happens even when the current branch is an ancestor of
another. Below, a commit occurs on branch <em>maint</em>, which was an
ancestor of <em>master</em>, resulting in <em>1800b</em>. Afterward,
<em>maint</em> is no longer an ancestor of <em>master</em>. To join the two
histories, a <a href='#merge'>merge</a> (or rebase) will be necessary.</p>
- <div class="center"><img src='commit-maint.png'></div>
+ <div class="center"><img src='commit-maint.svg.png'></div>
<p>Sometimes a mistake is made in a commit, but this is easy to correct with
<code>git commit --amend</code>. When you use this command, git creates a
new commit with the same parent as the current commit. (The old commit will
be discarded if nothing else references it.)</p>
- <div class="center"><img src='commit-amend.png'></div>
+ <div class="center"><img src='commit-amend.svg.png'></div>
<p>A fourth case is committing with a <a href="#detached">detached
HEAD</a>, as explained later.</p>
@@ -141,7 +185,7 @@ <h3 id="checkout">Checkout</h3>
files are copied from the stage.) Note that the current branch is not
- <div class="center"><img src='checkout-files.png'></div>
+ <div class="center"><img src='checkout-files.svg.png'></div>
<p>When a filename is <em>not</em> given but the reference is a (local)
branch, <em>HEAD</em> is moved to that branch (that is, we "switch to" that
@@ -151,7 +195,7 @@ <h3 id="checkout">Checkout</h3>
(<em>ed489</em>) but not in the new one is deleted; and any file that exists
in neither is ignored.</p>
- <div class="center"><img src='checkout-branch.png'></div>
+ <div class="center"><img src='checkout-branch.svg.png'></div>
<p>When a filename is <em>not</em> given and the reference is <em>not</em> a
(local) branch &mdash; say, it is a tag, a remote branch, a SHA-1 ID, or
@@ -163,25 +207,25 @@ <h3 id="checkout">Checkout</h3>
However, committing works slightly differently with a detached HEAD; this is
covered <a href="#detached">below</a>.</p>
- <div class="center"><img src='checkout-detached.png'></div>
+ <div class="center"><img src='checkout-detached.svg.png'></div>
<h3 id="detached">Committing with a Detached HEAD</h3>
<p>When <em>HEAD</em> is detached, commits work like normal, except no named
branch gets updated. (You can think of this as an anonymous branch.)</p>
- <div class="center"><img src='commit-detached.png'></div>
+ <div class="center"><img src='commit-detached.svg.png'></div>
<p>Once you check out something else, say <em>master</em>, the commit is
(presumably) no longer referenced by anything else, and gets lost. Note
that after the command, there is nothing referencing <em>2eecb</em>.</p>
- <div class="center"><img src='checkout-after-detached.png'></div>
+ <div class="center"><img src='checkout-after-detached.svg.png'></div>
<p>If, on the other hand, you want to save this state, you can create a new
named branch using <code>git checkout -b <em>name</em></code>.</p>
- <div class="center"><img src='checkout-b-detached.png'></div>
+ <div class="center"><img src='checkout-b-detached.svg.png'></div>
<h3 id="reset">Reset</h3>
@@ -195,21 +239,21 @@ <h3 id="reset">Reset</h3>
<code>--hard</code> is given, the working directory is also updated. If
<code>--soft</code> is given, neither is updated.</p>
- <div class="center"><img src='reset-commit.png'></div>
+ <div class="center"><img src='reset-commit.svg.png'></div>
<p>If a commit is not given, it defaults to <em>HEAD</em>. In this case,
the branch is not moved, but the stage (and optionally the working
directory, if <code>--hard</code> is given) are reset to the contents of the
last commit.</p>
- <div class="center"><img src='reset.png'></div>
+ <div class="center"><img src='reset.svg.png'></div>
<p>If a filename (and/or <code>-p</code>) is given, then the command works
similarly to <a href='#checkout'>checkout</a> with a filename, except only
the stage (and not the working directory) is updated. (You may also specify
the commit from which to take files, rather than <em>HEAD</em>.)</p>
- <div class="center"><img src='reset-files.png'></div>
+ <div class="center"><img src='reset-files.svg.png'></div>
<h3 id="merge">Merge</h3>
@@ -221,7 +265,7 @@ <h3 id="merge">Merge</h3>
merge. The reference is simply moved, and then the new commit is checked
- <div class="center"><img src='merge-ff.png'></div>
+ <div class="center"><img src='merge-ff.svg.png'></div>
<p>Otherwise, a "real" merge must occur. You can choose other strategies,
but the default is to perform a "recursive" merge, which basically takes the
@@ -232,7 +276,7 @@ <h3 id="merge">Merge</h3>
commit occurs, with an extra parent for the other commit
- <div class="center"><img src='merge.png'></div>
+ <div class="center"><img src='merge.svg.png'></div>
<h2 id="technical-notes">Technical Notes</h2>

0 comments on commit 11ee97d

Please sign in to comment.