@mitchallen/svg-tile
SVG Tile Pattern Generator
Installation
$ npm init
$ npm install @mitchallen/svg-tile --save
Legend
Usage
Step 1. Create a new project
- Create a new project
- Install the package (see instructions above)
Step 2. Define an input file
Define an input file and save as ./input/source.svg:
The input file should be an SVG file that contains:
- a style section
- a defs section which defines all the tiles with ids
For example:
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024">
<style>
rect.tileBack1 {
stroke: none;
fill: black;
}
rect.tileBack2 {
stroke: none;
fill: white;
}
rect.background {
stroke: none;
fill: white;
}
path.pie1 {
stroke: none;
stroke-width: 1;
fill: white;
stroke-linecap: butt;
}
path.pie2 {
stroke: none;
stroke-width: 1;
fill: black;
stroke-linecap: butt;
}
</style>
<defs>
<g id="base1">
<rect width="200" height="200" class="tileBack1" />
</g>
<g id="base2">
<rect width="200" height="200" class="tileBack2" />
</g>
<g id="tile1A">
<use href="#base1" />
<path d="M200,100 A 100,100 0,0,0 100,200 L 200,200 Z" class="pie1" />
<path d="M0,100 A 100,100 0,0,0 100,0 L 0,0 Z" class="pie1" />
</g>
<g id="tile2A">
<use href="#base2" />
<path d="M200,100 A 100,100 0,0,0 100,200 L 200,200 Z" class="pie2" />
<path d="M0,100 A 100,100 0,0,0 100,0 L 0,0 Z" class="pie2" />
</g>
<g id="tile1B">
<use href="#tile2A" transform="rotate(90,100,100)" />
</g>
<g id="tile2B">
<use href="#tile1A" transform="rotate(90,100,100)" />
</g>
</defs>
</svg>
Step 3. Define a generator file
Define a generator file (index.js), passing in the names of the tiles to the tiles
property.
The generator will alternate between the two sets of tiles.
let factory = require("@mitchallen/svg-tile")
let {
generate,
getSquareXY,
} = factory;
generate({
sourceFile: './input/source.svg',
targetFile: './output/square-tiles.svg',
toolTips: true,
width: 550,
height: 550,
tileSize: 200,
columns: 10,
rows: 10,
getXY: getSquareXY,
tiles: [
['tile1A', 'tile1B'],
['tile2A', 'tile2B'],
],
boardTransform: `translate(25,25) scale(0.25, 0.25)`,
backgroundColor: 'black',
})
Step 4. Run the file and generate a tiled SVG
Run the file and then open the output file (./output/...)
node index.js
open ./output/*.svg
Step 5. Use the generateLegend function to generate a tile legend SVG file:
// generate legend
let margin = 25;
let padding = 30
let tileSize = 200
let columns = 2
let rows = 2
let width = margin * 2 + tileSize * columns + padding * (columns - 1)
let height = margin * 2 + tileSize * rows + padding * (rows - 1)
generateLegend({
sourceFile: './input/source.svg',
targetFile: './output/legend-01.svg',
toolTips: true,
width,
height,
padding,
tileSize,
columns,
rows,
getXY: getSquareXY,
tiles: ['tile1A', 'tile1B','tile2A', 'tile2B'],
boardTransform: `translate(${margin},${margin}) scale(1.0, 1.0)`,
backgroundColor: 'gray',
})