Raster-wrapped SVG: visible-merge pixels inside `<image>` with XML viewport semantics—not a path exporter
`psd-svg-raster-wrap` fits design-system docs, review pages, or Storybook drops where one file must open everywhere: the SVG supplies viewport semantics while the payload stays PNG. Blend modes, adjustment layers, and smart objects are baked at merge—DevTools will not recreate Photoshop’s per-layer stack. Anyone expecting editable `path` data needs a different pipeline.
使用方法
- Merge visible to a new layer in Photoshop, align long edge and sRGB working space, then upload; if you need transparency, fix alpha before merge instead of faking cutouts in CSS later.
- Open the SVG in a text editor to confirm only `<image>` references appear—no surprise `<foreignObject>`—then smoke-test in Chrome and Safari to catch WebKit versus Blink scaling quirks.
- Document `viewBox` and embedded pixel dimensions in README so front-end can derive `sizes`; bump package version and fingerprinted URLs on every change.
PSD to SVG (raster) FAQ
The PSD is full of shapes—why does the SVG show almost no `<path>` and only an embedded bitmap? Is the job broken?
That is intentional: we merge visible pixels, then wrap them for consistent MIME and embedding. The tool does not reverse-export every shape as SVG geometry. Maintain true vectors in Illustrator or Figma; treating “shape layers exist” as “paths must appear” is a scope mismatch, not a converter defect.
Blend modes and gradient maps look different from layered Photoshop—what is the acceptance reference frame?
Judge against the single flattened frame from Photoshop because the online path mirrors that composite. Arguing from per-layer previews inside a browser is misleading; for disputes, pixel-diff the merged layer against the embedded PNG.
Smart objects look mushy after downscale—should we blame PNG compression first?
Start with high-quality rasterization at final display size and review interpolation; the wrapper cannot resurrect detail lost to downsampling. For Retina, raise the merge long edge instead of stretching an 800 px asset to 1600 px in CSS.
Front-end wants `<img src="*.svg">`—what CSP, caching, and dimension pitfalls appear with raster-wrapped SVGs?
Verify `img-src` allows the host, whether `data:` is banned, and whether explicit `width`/`height` are required to prevent CLS; pair fingerprinted filenames with sensible `Cache-Control`. Design previews are rarely byte-shrunken like production heroes—do not drop them into LCP slots without a perf review.
Batching PSDs into catalog SVGs—how do we stop one crop recipe from chopping headlines across mixed aspect ratios?
Bucket landscape, portrait, and near-square SKUs with different long-edge fits and padding; golden-test three files per bucket before full runs. Quarantine outliers instead of globally retuning a crop that silently decapitates an entire feed.