The downloaded file is not the whole preview you see on screen — it is a single SVG tile, and CSS (or a graphics application) repeats that one tile across the larger area shown in the preview. The SVG Pattern Generator builds one compact square vector tile with explicit width, height, and viewBox attributes, and that single tile is what gets saved when you click Download SVG Tile. The repeated visual in the preview is produced by CSS tiling the same source tile via background-image and background-size, not by stitching many tiles into one image. Because the file contains exactly one motif unit, the saved SVG stays small, and you decide later how much area the pattern covers by changing the CSS background-size, the container size, or both. Understanding this — tile in the file, repetition in CSS — is the central shift behind the tool. Every time you change a control and the preview updates, the same regeneration also rewrites the CSS data URL, the standalone markup, and the bytes written to the downloaded file, so all three outputs stay synchronized.
What the Preview Shows vs What the Downloaded File Contains
The large rectangle of repeated shapes on screen is built by the browser drawing the same one-tile SVG many times. The download button writes that single tile to disk, byte-for-byte identical to the markup shown in the SVG field. There is no screenshot inside the file and no baked-in tiling data.
This separation has three practical consequences:
- The downloaded file is always small, regardless of how large the preview looks. The visual scale lives in the consuming CSS or application.
- Two preview areas of different sizes can use the exact same downloaded tile; only background-size or container dimensions change.
- A graphics editor that opens the file shows one motif on a transparent or filled background, not a tiled mosaic.
If you want a flat picture of the preview rather than a repeating tile, you would have to rasterize the tiled CSS in a browser at the final size. The generator never produces that composite image.
How a Single Tile Repeats to Cover a Larger Area
Three synchronized outputs come from the same source tile: a live CSS declaration, the standalone SVG markup, and the downloaded file. The CSS path is the most common because it embeds the SVG directly. For a deeper walk-through of the tile-first mental model, see Generate an SVG Pattern Correctly: A Tile-First Workflow.
The CSS output uses background-color, background-image, and background-size. The image value contains the exact generated SVG after percent encoding, so pasting one declaration is enough — no separate file request is needed at runtime. background-size is set to match the tile size in pixels, which is what tells the browser how often to repeat.
The standalone SVG markup is the same tile written out as XML you can paste into an inline svg element, an SVG sprite, or a design tool. It keeps the same width, height, viewBox, background rectangle, and one motif element as the downloaded file.
Some destinations refuse data URLs. A Content Security Policy that disallows data:, an HTML email client that strips them, or a CMS sanitizer can all block the CSS data URL approach even though the SVG itself is valid. When that happens, the downloaded file becomes the asset: serve the SVG from your own origin and replace the data URL with its URL, keeping background-size at the same pixel value.
This tile-first approach matches the W3C SVG 2 pattern model and the MDN-documented pattern element, although this implementation exports a standalone tile used as a CSS background image rather than wrapping the motif in an internal SVG pattern element; the visual repeat is performed by CSS background tiling.
Generate, Preview, and Download an SVG Pattern Tile
Follow these steps to go from controls on screen to a usable tile file:
- Pick a pattern style (dots, grid, diagonal lines, or waves) and set the tile size, shape width, foreground, and background colors as six-digit HEX values.
- Inspect the repeated preview at approximately the size where the pattern will be used; treat the control numbers as hints and the preview as the source of truth.
- Copy the CSS if your destination allows data URLs, copy the standalone SVG markup if you need raw XML, or download the tile and serve it as an asset if a Content Security Policy blocks embedded images.
- Place the SVG Pattern Generator and the destination environment side by side so the final size and rendering engine match the preview as closely as possible.
- Test at the final CSS size and device pixel ratio; rebuild with the same controls if you change any input, because the output is deterministic and the original settings will reproduce byte-for-byte.
When to Copy CSS, Copy SVG, or Download the Tile
Each output serves a different consumer. Choose based on where the pattern will live:
| Output | Contains | Best for |
|---|---|---|
| Copy CSS | background-color + percent-encoded SVG data URL + background-size | Self-contained HTML prototypes, cards, badges, and decorative surfaces where data URLs are allowed |
| Copy SVG | Standalone SVG markup with width, height, viewBox, background rect, and one motif | Design tools, inline SVG in HTML, sprite sheets, and manual XML editing |
| Download SVG Tile | The same single tile as the markup field, saved as a .svg file | Long-lived assets behind a strict CSP, CDN-hosted backgrounds, and email-safe use after self-hosting |
The three outputs always start from the exact same deterministic geometry, so changing one and copying another without regenerating will not mix styles.
Limits Worth Knowing Before You Use the Tile
The generator constrains inputs to keep geometry predictable. Tile size accepts integers from 8 through 128 pixels, and shape width accepts values from 1 through 12 pixels. Both colors must be six-digit HEX values, normalized to lowercase. The interface constrains normal input to those ranges; the pure generator logic independently rejects unsupported styles, malformed colors, and out-of-range values rather than silently repairing them.
Each style has deterministic geometry worth understanding:
- Dots place one circle at the center of the square tile. Shape width sets the radius.
- Grid draws the top and left edges only, so adjacent copies complete a regular lattice without double-width interior lines.
- Diagonal creates several parallel segments that cross tile boundaries, so neighbouring copies continue the stripe rhythm.
- Waves use one quadratic curve followed by a smooth quadratic continuation across the tile.
Because shape width means radius for dots and stroke width for line-based styles, equal numeric values do not guarantee equal perceived weight. Inspect the repeated preview rather than judging the control number alone, especially when foreground and background have strong contrast. A small fraction of a stroke per tile is what produces a clean line; very large stroke widths on small tiles can dominate the geometry. Fractional layout scaling, browser zoom, and sharply contrasting diagonals can also reveal antialiasing differences at boundaries — the tool does not guarantee print registration, perceptual uniformity, accessibility, or compatibility with software that rasterizes SVG differently. For palette or contrast decisions before you settle on final values, use a related color tool such as the Color Palette Generator or the Color Contrast Checker.
Related reading: RGB to HEX Color: A Two-Way Converter With Live Preview.