Copy CSS or SVG from a shape or text layer
Right-click a shape or text layer in Paint by Zaweba and Copy CSS or Copy SVG. What each gives you and how to use it in a web page.
Designing a button or a badge in an image editor and then rebuilding it by hand in CSS is a tedious round trip. Paint by Zaweba saves part of that work. On a shape or text layer, Copy CSS and Copy SVG put code on the clipboard that describes the layer, ready to paste into a stylesheet or a web page.
Where to find them
Right-click a shape or text layer, or open the Layer menu, and choose Copy CSS or Copy SVG. Nothing is saved to disk; the code goes straight to the clipboard.
What Copy CSS gives you
The CSS covers the layer's position and size, its background or gradient, corner radius, border, opacity, blend mode, rotation and shadows. For text layers it includes the fonts as well.
That's most of what you need to reproduce a button, a card, a tag or a heading on a web page. Paste it into your stylesheet and you have a starting point that matches the design.
What Copy SVG gives you
SVG describes a shape as vector graphics. Copy SVG gives a rect, ellipse or path, with its gradient and stroke. Paste it into a web page and it scales to any size without going blurry, or into another program that reads SVG.
Rectangles come out as rect elements and ellipses as ellipse elements, which are simple and easy to edit by hand. Other shapes come out as paths.
CSS or SVG?
CSS suits elements that are boxes: buttons, panels, cards, banners and labels. Web pages are built from boxes, and CSS is the natural way to style them.
SVG suits icons, logos and shapes that aren't boxes, such as a star, an arrow or a custom badge outline. It also suits anything that needs to stay crisp at many sizes.
For text, CSS is usually the better choice, since it keeps the words as real text that people can select and search engines can read.
Working well with it
Design at the size you'll use. Position and size are copied as they are in the document, so a button drawn at the real pixel size will paste in at the right size.
Use shape and text layers for anything you plan to copy as code. Pixel layers aren't covered; the commands work on shape and text layers.
Check the fonts. The CSS names the fonts used, but the web page needs to have those fonts available. If it doesn't, the browser will fall back to another font.
Treat the output as a starting point. You'll usually tidy it up, rename things and fit it into your site's stylesheet. The value is in not having to measure colours, radii and shadows by eye.
Limits of the copied code
Expecting a whole design to turn into a web page is the misunderstanding to avoid. These commands work one layer at a time and describe that layer's look. Layout of a full page is still a job for your web code.
Copying from a pixel layer and wondering why nothing useful comes out is the other. Make sure the layer is a shape or text layer first.
For anyone who designs for the web and builds it too, these two commands remove a dull step. Paint by Zaweba already knows the exact values from the layer, so it makes sense to let it write them down for you.
