SVG Linocut Texture With Filters

SVG linocut texture works best when the carved feeling is added to protected semantic silhouettes rather than sprayed across every pixel. This tutorial builds scale-aware grain and edge erosion, then tests thumbnail recognition, zoom, contrast, text isolation, and raster export before accepting the recipe.

SVG linocut texture protects the silhouette first

Begin with a two- or three-tone composition whose shapes read without any filter. Name foreground figures, background cuts, negative space, and protected lettering in separate groups. If the untextured thumbnail fails, noise will not rescue it. SVG linocut texture should add material tension to an already legible image, not become the only source of edge definition.

Draw at a stable viewBox and decide the intended physical or screen sizes. A turbulence frequency that feels like paper grain at 1200 pixels can become mud at 180 pixels or disappear on a poster. Store recipe parameters by output scale or derive them from a declared texture unit. The base geometry remains reusable while each export profile receives a bounded amount of erosion and ink variation.

Keep a semantic geometry checklist in the source file. Designers should identify which contours may erode, which must remain exact, and which negative spaces carry recognition before tuning any filter values.

This teaching fixture checks scale-aware grain and erosion against protected-feature and filter-region budgets; browser rendering still requires visual and raster-export inspection.

Runnable artifact — linocut-filter-budget.test.mjs

import assert from "node:assert/strict";
const recipe=(width)=>{const scale=Math.max(.5,Math.min(2,width/800));return{frequency:.032/scale,displacement:6*scale,erosion:1.4*scale,region:1.18,protectedMin:12*scale}};
for(const width of [240,800,1600]){const x=recipe(width);assert.ok(x.frequency>=.016&&x.frequency<=.064);assert.ok(x.displacement<=12);assert.ok(x.erosion<x.protectedMin/4);assert.ok(x.region<=1.2)}assert.deepEqual(recipe(800),{frequency:.032,displacement:6,erosion:1.4,region:1.18,protectedMin:12});console.log("PASS: linocut recipe preserves protected feature budgets");

Run node linocut-filter-budget.test.mjs. Expected receipt: PASS: linocut recipe preserves protected feature budgets.

Build the filter as named layers

Create noise with feTurbulence, shape its contrast through component transfer, transform it into a displacement or erosion signal, combine it with SourceGraphic, and composite the result back inside an expanded filter region. Name intermediate results such as grain, carvedEdge, brokenInk, and finalInk. The Filter Effects specification defines the processing model and color-interpolation concerns that make those names more than convenience.

Keep each primitive removable. SVG filter texture is easier to art-direct when a reviewer can turn off grain, edge displacement, or speckle independently. Avoid enormous filter regions and extreme octaves that create expensive offscreen buffers. Measure the actual page, because a beautiful isolated SVG can become an LCP problem when twelve filtered cards animate or resize together.

Specify filterUnits and primitiveUnits deliberately. Defaults can make the same recipe scale with bounding boxes in surprising ways, especially when several differently sized shapes reuse one filter definition. Record both coordinate systems in the export recipe.

Tune feTurbulence as material, not wallpaper

MDN's feTurbulence reference documents baseFrequency, numOctaves, seed, stitchTiles, and noise types. Low-frequency noise can bend an edge; higher frequency can break ink into flecks. Use one fixed seed for a reproducible edition and expose a curated seed list rather than a randomize button that makes every review screenshot unrelated.

FeTurbulence ink should follow form. Mask broad grain into large dark areas, reduce it near faces or critical contours, and omit it from small text. Consider a directional scratch layer authored as paths instead of expecting isotropic noise to resemble every carving mark. Digital linocut becomes convincing through hierarchy: deliberate gouges, bounded irregularity, and occasional imperfect ink, not uniform distress across all surfaces.

Expose seed, frequency, octave count, and displacement through bounded controls with a reset. Free-form numeric inputs invite expensive or invisible states that teach little about the intended print language. The accepted SVG linocut texture should always be recoverable from named values.

Erode edges without deleting identity

Displacement moves pixels around an edge; morphology can dilate or erode alpha; thresholded noise can punch holes in ink. Apply small values, then inspect the narrowest essential feature. Protect eyes, hands, lettering counters, and any contour carrying the subject. Create an exclusion mask from semantic groups instead of painting over damage after export. The mask becomes part of the editable recipe.

Scale erosion relative to viewBox units and the intended output. SVG linocut texture needs different bounds for a social card and a large print. Define a feature-loss budget: for example, no protected opening shrinks below a measured width and silhouette overlap with the clean source stays above a threshold. The test is a guardrail for art direction, not a claim that one numeric score captures visual quality.

Inspect diagonals and small holes at target resolution after every erosion change. They are usually the first structures to disappear and provide a more sensitive warning than broad silhouette overlap alone.

Keep lettering and UI outside the texture

Set titles, labels, and interactive controls as ordinary HTML or an unfiltered SVG text group unless the lettering itself is the artwork. Texture can close counters, soften focus outlines, and reduce contrast unpredictably. If carved lettering is essential, convert a display copy to paths while preserving an accessible text equivalent; never convert navigation or body text merely for style.

Compare the approach with SVG filter textures for broader primitive recipes and risograph color separations when imperfect registration, rather than carved relief, is the material thesis. SVG linocut texture should support the semantic hierarchy. A viewer must be able to distinguish caption, artwork, control, and decorative grain at a glance.

Render protected text and controls after the filtered artwork in a separate stacking context. This prevents an expanded filter region from blurring, clipping, or intercepting interactive elements that happen to overlap visually. Verify pointer and focus behavior as well as pixels.

Test color space and rasterization differences

SVG filter primitives can produce different-looking results when color interpolation, browser rasterization, pixel ratio, or export tooling changes. Declare color-interpolation-filters where needed, compare sRGB outputs, and keep the clean source beside filtered screenshots from supported browsers. Rasterize through the production path at every target size, then inspect transparency, clipping, seams, and palette values.

Use Canvas dithering only after deciding whether the print-like texture belongs in vector filter space or final pixels. Stacking both without a plan often destroys tonal structure. SVG linocut texture should have one material owner per scale. Hash golden exports for change detection, but require human review when antialiasing differences alter many pixels without actually damaging the composition.

Automate target-size exports but keep a human approval contact sheet for every release. Pixel hashes detect unexpected change, while side-by-side judgment decides whether that change improves the authored balance of cut and ink. Review the smallest export first.

Study linocuts without turning history into settings

The Victoria and Albert Museum linocut collection search provides access to works for visual research. Museum records can support dates, makers, media, and object context; they do not prove that a turbulence frequency or displacement scale corresponds to a historical cutting or printing technique. Describe this as a digital texture inspired by carved and printed marks.

Make an observation sheet: silhouette economy, direction of cuts, use of untouched paper, density, edge quality, and ink variation in specific referenced works. Then identify which observations the digital recipe translates and which it cannot. Procedural print texture becomes richer when code responds to real visual decisions rather than applying a generic “vintage” filter to unrelated imagery.

Write down which browser screenshot is the color authority and which exports are tolerated variants. Without a named reference, teams can spend days matching antialiasing differences that do not affect the piece's thesis. Preserve the reasoning with the swatches.

Archive the recipe and rejected contact sheet

Save clean SVG geometry, protected masks, filter primitives and named results, seed, scale profile, color interpolation, palette, browser captures, target-size rasters, contrast checks, timing, and rejected recipes. Include the contact sheet because it records the edge where texture stopped supporting recognition. If physical output matters, add paper, ink, printer, and scan notes as separate evidence rather than predicting them from the browser.

Revisit SVG linocut texture when the silhouette, typography, export engine, or output size changes. For a different physical language, pen plotter hatching may be a more honest foundation. The successful filter feels tactile while remaining reversible: remove it and the image still reads; restore it and every irregular mark belongs to a bounded, reproducible system.

Include texture-free and single-layer variants in the archive. They let future maintainers isolate a failing primitive and give print collaborators clean material for a different physical interpretation.

Build one review plate containing the clean silhouette, grain-only layer, erosion-only layer, complete SVG linocut texture, protected-mask overlay, and three rejected recipes. Render the plate at thumbnail, article, social-card, and print-preview sizes in the production browser and rasterizer, then inspect filter clipping, color shift, minimum openings, text isolation, processing time, and recognizable negative space. Ask a reviewer to identify the subject before and after texture at each size and to explain which irregular marks feel carved, printed, or merely noisy. Archive their observations with numeric bounds instead of turning them into a fake objective quality score. This contact sheet makes restraint reproducible: the accepted recipe adds directional material character, protected features survive, export differences remain known, and future changes can be evaluated against both a clean source and the specific failures that defined the edition's visual boundary. Keep the clean plate beside every future revision so material character never becomes an excuse for lost meaning or inaccessible contrast.