SVG grid tutorial

This page will show how to use SVG commands to produce a grid. I use this to create a frame into which I then put image files.

This example will create a 2 row 7 column grid for images which are cropped to 200px wide by 300px high.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="1448" height="618" xmlns="http://www.w3.org/2000/svg" version="1.1">

<desc>SVG tutorial using straight lines to make a grid</desc>

 <g stroke="blue" >

  <!-- The Upper left is 0,0 -->
  <!-- Draw the top, middle and bottom horizontal lines -->

  <line x1="0" y1="3" x2="1448" y2="3" stroke-width="6" />
  <line x1="0" y1="309" x2="1448" y2="309" stroke-width="6" />
  <line x1="0" y1="615" x2="1448" y2="615" stroke-width="6" />
 
  <!-- Draw the vertical lines left to right -->

  <line x1="3" y1="0" x2="3" y2="618" stroke-width="6" />
  <line x1="209" y1="0" x2="209" y2="618" stroke-width="6" />
  <line x1="415" y1="0" x2="415" y2="618" stroke-width="6" />
  <line x1="621" y1="0" x2="621" y2="618" stroke-width="6" />
  <line x1="827" y1="0" x2="827" y2="618" stroke-width="6" />
  <line x1="1033" y1="0" x2="1033" y2="618" stroke-width="6" />
  <line x1="1239" y1="0" x2="1239" y2="618" stroke-width="6" />
  <line x1="1445" y1="0" x2="1445" y2="618" stroke-width="6" />
 </g>
</svg>