Adobe generator syntax ‘cheatsheet’
I'm always looking up the Adobe generator syntax and yet I never bookmark it. I feel like it would be a valuable resource to clearly show. Something I think the Adobe documentation lacks. This could be the reason I haven't bookmarked it.
Each image is made up of dimensions, filename and quality.
See the Pen raZgNL by Steve (@stevemckinney) on CodePen.
It's necessary to have a space after the dimensions. Don't put a space between the dimensions where width and height are specified. px is assumed if no measurement is specified. To have the image width or height calculated automatically, use a ‘?’ for the value. Like so
?x1200 name.jpg or
The quality can’t have a space between it. Quality can be a number
8 or percentage
80%. For filetypes like png you can specify png-8, png-32, etc.
1x, 2x and beyond
filename.jpg, 200% firstname.lastname@example.org, 300% email@example.com
Comma separate your list
This is a comma separated list of values. Using percentage as the size.
I’ve found simpler shapes work for the SVG export. A common use I think would be icon fonts. Make sure you convert these layers to a shape, otherwise it will try make it into an SVG using the font.