Pure SVG photo gallery

[Gregop]

I wanted to make a simple photo gallery that just displays the photo as big as possible (full size responsive) and with a minimal navigation between images.
This could have been done with HTML (+CSS +JS) but I instead used SVG format.
SVG allows linking between "slides", it scales well and can even embed the images. Here is the result:
SVG Photo Gallery

What do you think of it?

 

[The_Traveler]

It works for simple linear viewing but the simple navigability is both a blessing and the biggest problem.

 

[Gregop]

This is really a template I'm going to use to share some photos with family, I wanted something similar to what you do when you explore a photo folder: a big size photo and you just click next to see the next one.
Now, SVG possibilities are not limited to this, you can see this as a proof of concept for some more elaborated templates (I will make one later). From a developer stand point, I find SVG a really elegant way to do this and I'm surprised it is not more used already.

 

[KmH]

It doesn't look like you handle image real estate loss (crop) when your image has a different aspect ratio from the display the viewer is using.

While most DSLR cameras make photos that have a long side 1.5x longer than the short side (3:2 aspect ratio), my computer display has a 1.33 aspect ratio (1600 x 1200 px) that crops the long side of any 1.5 (3:2 aspect ratio) photo displayed full screen.

Digital photos are raster graphics. SVG is a vector graphics file type.
Raster graphics - Wikipedia, the free encyclopedia
Vector graphics - Wikipedia, the free encyclopedia

 

[Gregop]

@KmH May I ask what browser and version do you use? Aspect ratio should be preserved, it works fine for me on IE11, FF24, Chrome35, Opera22 (windows 7).
The fact that SVG is a vector graphics type doesn't forbif to use raster graphics inside. When you use CSS3 to fit image to screen, you do the same thing as what SVG does.
Not only SVG is a vector graphivs format, but it also supports linking, animations, ... a lot of this is done today by using HTML+CSS+JS when you can have it all in a single file format.