{"id":364090,"date":"2022-03-18T15:31:22","date_gmt":"2022-03-18T22:31:22","guid":{"rendered":"https:\/\/css-tricks.com\/?p=364090"},"modified":"2022-03-18T15:31:24","modified_gmt":"2022-03-18T22:31:24","slug":"optimizing-svg-patterns","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/optimizing-svg-patterns\/","title":{"rendered":"Optimizing SVG Patterns to Their Smallest Size"},"content":{"rendered":"\n<p>I recently created a brick wall pattern as part of my <a href=\"https:\/\/codepen.io\/collection\/DRMKdB\" rel=\"noopener\">#PetitePatterns<\/a> series, a challenge where I create organic-looking patterns or textures in SVG within 560 bytes (or approximately the size of two tweets). To fit this constraint, I have gone through a journey that has taught me some radical ways of optimizing SVG patterns so that they contain as little code as possible without affecting the overall image quality.<\/p>\n\n\n\n<p>I want to walk you through the process and show you how we can take an SVG pattern that starts at 197 bytes all the way down to a mere 44 bytes \u2014 a whopping 77.7% reduction!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"the-svg-pattern\">The SVG pattern<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLPgdgg\" src=\"\/\/codepen.io\/anon\/embed\/yLPgdgg?height=450&amp;theme-id=1&amp;slug-hash=yLPgdgg&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLPgdgg\" title=\"CodePen Embed yLPgdgg\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This is what\u2019s called a \u201crunning bond\u201d brick pattern. It\u2019s the most common brick pattern out there, and one you\u2019ve surely seen before: each row of bricks is offset by one half the length of a brick, creating a repeating staggered pattern. The arrangement is pretty simple, making SVG\u2019s <code>&lt;pattern&gt;<\/code> element a perfect fit to reproduce it in code.<\/p>\n\n\n\n<p>The SVG <code>&lt;pattern&gt;<\/code> element uses a pre-defined graphic object which can be replicated (or &#8220;tiled&#8221;) at fixed intervals along the horizontal and vertical axes. Essentially, we define a rectangular tile pattern and it gets repeated to paint the fill area.<\/p>\n\n\n\n<p>First, let\u2019s set the dimensions of a brick and the gap between each brick. For the sake of simplicity, let\u2019s use clean, round numbers: a width of <code>100<\/code> and a height of <code>30<\/code> for the brick, and <code>10<\/code> for the horizontal and vertical gaps between them.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"750\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_CC3A874441AF9D490DD602D92C31709107FDD676F0B7D1EB1E4D2076D75BD9BB_1644058005414_highlight.jpg?resize=1280%2C750&#038;ssl=1\" alt=\"Showing a highlighted portion of a brick wall pattern, which is the example we are using for optimizing SVG patterns.\" class=\"wp-image-364091\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_CC3A874441AF9D490DD602D92C31709107FDD676F0B7D1EB1E4D2076D75BD9BB_1644058005414_highlight.jpg?w=1280&amp;ssl=1 1280w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_CC3A874441AF9D490DD602D92C31709107FDD676F0B7D1EB1E4D2076D75BD9BB_1644058005414_highlight.jpg?resize=300%2C176&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_CC3A874441AF9D490DD602D92C31709107FDD676F0B7D1EB1E4D2076D75BD9BB_1644058005414_highlight.jpg?resize=1024%2C600&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_CC3A874441AF9D490DD602D92C31709107FDD676F0B7D1EB1E4D2076D75BD9BB_1644058005414_highlight.jpg?resize=768%2C450&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_CC3A874441AF9D490DD602D92C31709107FDD676F0B7D1EB1E4D2076D75BD9BB_1644058005414_highlight.jpg?resize=1000%2C586&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Next, we have to identify our \u201cbase\u201d tile. And by \u201ctile\u201d I\u2019m talking about pattern tiles rather than physical tiles, not to be confused with the bricks. Let\u2019s use the highlighted part of the image above as our pattern tile: two whole bricks in the first row, and one whole sandwiched between two half bricks in the second row. Notice how and where the gaps are included, because those need to be included in the repeated pattern tile.<\/p>\n\n\n\n<p>When using <code>&lt;pattern&gt;<\/code>, we have to define the pattern\u2019s <code>width<\/code> and <code>height<\/code>, which correspond to the width and height of the base tile. To get the dimensions, we need a little math:<\/p>\n\n\n\n<pre rel=\"\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">Tile Width  = 2(Brick Width) + 2(Gap) = 2(100) + 2(10) = 220\nTile Height = 2(Bright Height) + 2(Gap) = 2(30) + 2(10) = 80<\/code><\/pre>\n\n\n\n<p>Alright, so our pattern tile is <code>220\u271580<\/code>. We also have to set the <code>patternUnits<\/code> attribute, where the value <code>userSpaceOnUse<\/code> essentially means pixels. Finally, adding an <code>id<\/code> to the pattern is necessary so that it can be referenced when we are painting another element with it.<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;pattern id=\"p\" width=\"220\" height=\"80\" patternUnits=\"userSpaceOnUse\">\n  &lt;!-- pattern content here -->\n&lt;\/pattern><\/code><\/pre>\n\n\n\n<p>Now that we have established the tile dimensions, the challenge is to create the code for the tile in a way that renders the graphic with the smallest number of bytes possible. This is what we hope to end up with at the very end:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_CC3A874441AF9D490DD602D92C31709107FDD676F0B7D1EB1E4D2076D75BD9BB_1644084615761_tile.png?resize=498%2C181&#038;ssl=1\" alt=\"\" class=\"wp-image-364092\" width=\"498\" height=\"181\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_CC3A874441AF9D490DD602D92C31709107FDD676F0B7D1EB1E4D2076D75BD9BB_1644084615761_tile.png?w=495&amp;ssl=1 495w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_CC3A874441AF9D490DD602D92C31709107FDD676F0B7D1EB1E4D2076D75BD9BB_1644084615761_tile.png?resize=300%2C109&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>The bricks (in black) and gaps (in white) of the final running bond pattern<\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"initial-markup-197-bytes\">Initial markup (197 bytes)<\/h3>\n\n\n<p>The simplest and most declarative approach to recreate this pattern that comes to my mind is to draw five rectangles. By default, the <code>fill<\/code> of an SVG element is black and the <code>stroke<\/code> is transparent. This works well for optimizing SVG patterns, as we don\u2019t have to explicitly declare those in the code.<\/p>\n\n\n\n<p>Each line in the code below defines a rectangle. The <code>width<\/code> and <code>height<\/code> are always set, and the <code>x<\/code> and <code>y<\/code> positions are only set if a rectangle is offset from the <code>0<\/code> position.<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;rect width=\"100\" height=\"30\"\/>\n&lt;rect x=\"110\" width=\"100\" height=\"30\"\/>\n&lt;rect y=\"40\" width=\"45\" height=\"30\"\/>\n&lt;rect x=\"55\" y=\"40\" width=\"100\" height=\"30\"\/>\n&lt;rect x=\"165\" y=\"40\" width=\"55\" height=\"30\"\/><\/code><\/pre>\n\n\n\n<p>The top row of the tile contained two full-width bricks, the second brick is positioned to <code>x=\"110\"<\/code> allowing <code>10<\/code> pixels of gap before the brick. Similarly there&#8217;s <code>10<\/code> pixels of gap after, because the brick ends at <code>210<\/code> pixels  (<code>110 + 100 = 210<\/code>) on the horizontal axis even though the <code>&lt;pattern&gt;<\/code> width is <code>220<\/code> pixels. We need that little bit of extra space; otherwise the second brick would merge with the first brick in the adjacent tile.<\/p>\n\n\n\n<p>The bricks in the second (bottom) row are offset so the row contains two half bricks and one whole brick. In this case, we want the half-width bricks to merge so there\u2019s no gap at the start or the end, allowing them to seamlessly flow with the bricks in adjoining pattern tiles. When offsetting these bricks, we also have to include half gaps, thus the <code>x<\/code> values are <code>55<\/code> and <code>165<\/code>, respectively.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"element-reuse-43b-154b-total\">Element reuse, (-43B, 154B total)<\/h3>\n\n\n<p>It seems inefficient to define each brick so explicitly. Isn\u2019t there some way to optimize SVG patterns by reusing the shapes instead?<\/p>\n\n\n\n<p>I don\u2019t think it\u2019s widely known that SVG has a <code>&lt;use&gt;<\/code> element. You can reference another element with it and render that referenced element wherever <code>&lt;use&gt;<\/code> is used. This saves quite a few bytes because we can omit specifying the widths and heights of each brick, except for the first one.<\/p>\n\n\n\n<p>That said, <code>&lt;use&gt;<\/code> does come with a little price. That is, we have to add an <code>id<\/code> for the element we want to reuse.<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;rect id=\"b\" width=\"100\" height=\"30\"\/>\n&lt;use href=\"#b\" x=\"110\"\/>\n&lt;use href=\"#b\" x=\"-55\" y=\"40\"\/>\n&lt;use href=\"#b\" x=\"55\" y=\"40\"\/>\n&lt;use href=\"#b\" x=\"165\" y=\"40\"\/><\/code><\/pre>\n\n\n\n<p>The shortest <code>id<\/code> possible is one character, so I chose \u201cb\u201d for brick. The <code>&lt;use&gt;<\/code> element can be positioned similarly to <code>&lt;rect&gt;<\/code>, with the <code>x<\/code> and <code>y<\/code> attributes as offsets. Since each brick is full-width now that we\u2019ve switched to <code>&lt;use&gt;<\/code> (remember, we explicitly halved the bricks in the second row of the pattern tile), we have to use a negative <code>x<\/code> value in the second row, then make sure the last brick overflows from the tile for that seamless connection between bricks. These are okay, though, because anything that falls outside of the pattern tile is automatically cut off.<\/p>\n\n\n\n<p>Can you spot some repeating strings that can be written more efficiently? Let\u2019s work on those next.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"rewriting-to-path-54b-100b-total\">Rewriting to path (-54B, 100B total)<\/h3>\n\n\n<p><code>&lt;path&gt;<\/code> is probably the most powerful element in SVG. You can draw just about any shape with \u201ccommands\u201d in its <code>d<\/code> attribute. There are 20 commands available, but we only need the simplest ones for rectangles.<\/p>\n\n\n\n<p>Here\u2019s where I landed with that:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;path d=\"M0 0h100v30h-100z\n         M110 0h100v30h-100\n         M0 40h45v30h-45z\n         M55 40h100v30h-100z\n         M165 40h55v30h-55z\"\/><\/code><\/pre>\n\n\n\n<p>I know, super weird numbers and letters! <a href=\"https:\/\/css-tricks.com\/svg-path-syntax-illustrated-guide\/\">They all have meaning<\/a>, of course. Here\u2019s what\u2019s happening in this specific case:<\/p>\n\n\n\n<ul><li><strong><code>M{x} {y}<\/code>:<\/strong> Moves to a point based on coordinates.<\/li><li><strong><code>z<\/code>:<\/strong> Closes the current segment.<\/li><li><strong><code>h{x}<\/code>:<\/strong> Draws a horizontal line from the current point, with the length of <code>x<\/code> in the direction defined by the sign of <code>x<\/code>. Lowercase <code>x<\/code> indicates a relative coordinate.<\/li><li><strong><code>v{y}<\/code>:<\/strong> Draws a vertical line from the current point, with the length of <code>y<\/code> in the direction defined by the sign of <code>y<\/code>. Lowercase <code>y<\/code> indicates a relative coordinate.<\/li><\/ul>\n\n\n\n<p>This markup is much more terse than the previous one (line breaks and indentation whitespace is only for readability). And, hey, we&#8217;ve managed to cut out half of the initial size, arriving at 100 bytes. Still, something makes me feel like this could be smaller\u2026<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"tile-revision-38b-62b-total\">Tile revision (-38B, 62B total)<\/h3>\n\n\n<p>Doesn\u2019t our pattern tile have repeating parts? It\u2019s clear that in the first row a whole brick is repeated, but what about the second row? It\u2019s a bit harder to see, but if we cut the middle brick in half it becomes obvious.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"495\" height=\"180\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_CC3A874441AF9D490DD602D92C31709107FDD676F0B7D1EB1E4D2076D75BD9BB_1644058595954_half.png?resize=495%2C180&#038;ssl=1\" alt=\"The left half preceding the red line is the same as the right side.\" class=\"wp-image-364093\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_CC3A874441AF9D490DD602D92C31709107FDD676F0B7D1EB1E4D2076D75BD9BB_1644058595954_half.png?w=495&amp;ssl=1 495w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_CC3A874441AF9D490DD602D92C31709107FDD676F0B7D1EB1E4D2076D75BD9BB_1644058595954_half.png?resize=300%2C109&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Well, the middle brick isn\u2019t exactly cut in half. There\u2019s a slight offset because we also have to account for the gap. Anyways, we just found a simpler base tile pattern, which means fewer bytes! This also means we have to halve the <code>width<\/code> of our <code>&lt;pattern&gt;<\/code> element from 220 to 110.<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;pattern id=\"p\" width=\"110\" height=\"80\" patternUnits=\"userSpaceOnUse\">\n  &lt;!-- pattern content here -->\n&lt;\/pattern><\/code><\/pre>\n\n\n\n<p>Now let\u2019s see how the simplified tile is drawn with <code>&lt;path&gt;<\/code>:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;path d=\"M0 0h100v30h-100z\n         M0 40h45v30h-45z\n         M55 40h55v30h-55z\"\/><\/code><\/pre>\n\n\n\n<p>The size is reduced to 62 bytes, which is already less than a third of the original size! But why stop here when there\u2019s even more we can do!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"shortening-path-commands-9b-53b-total\">Shortening path commands (-9B, 53B total)<\/h3>\n\n\n<p>It\u2019s worth getting a little deeper into the <code>&lt;path&gt;<\/code> element because it provides more hints for optimizing SVG patterns. One misconception I\u2019ve had when working with <code>&lt;path&gt;<\/code> is regarding how the <code>fill<\/code> attribute works. Having played a lot with MS Paint in my childhood, I\u2019ve learned that any shape I want to fill with a solid color has to be closed, i.e. have no open points. Otherwise, the paint will leak out of the shape and spill over everything.<\/p>\n\n\n\n<p>In SVG, however, this is not true. Let me quote <a href=\"http:\/\/www.w3.org\/TR\/SVG\/painting.html#FillProperties\" rel=\"noopener\">the spec<\/a> itself:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>The fill operation fills open subpaths by performing the fill operation as if an additional &#8220;closepath&#8221; command were added to the path to connect the last point of the subpath with the first point of the subpath.<\/p><\/blockquote>\n\n\n\n<p>This means we can omit the close path commands (<code>z<\/code>), because the subpaths are considered automatically closed when filled.<\/p>\n\n\n\n<p>Another useful thing to know about path commands is that they come in uppercase and lowercase variations. Lowercase letters mean that relative coordinates are used; uppercase letters mean absolute coordinates are used instead.<\/p>\n\n\n\n<p>It\u2019s a little trickier than that with the <code>H<\/code> and <code>V<\/code> commands because they only include one coordinate. Here\u2019s how I would describe these two commands:<\/p>\n\n\n\n<ul><li><strong><code>H{x}<\/code>:<\/strong> Draws a horizontal line from the current point to coordinate <code>x<\/code>.<\/li><li><strong><code>V{y}<\/code>:<\/strong> Draws a vertical line from the current point to coordinate <code>y<\/code>.<\/li><\/ul>\n\n\n\n<p>When we are drawing the first brick in the pattern tile, we start from the <code>(0,0)<\/code> coordinates. We then draw a horizontal line to <code>(100,0)<\/code> and a vertical line to <code>(100,30)<\/code>, and finally, draw a horizontal line to <code>(0,30)<\/code>. We used the <code>h-100<\/code> command in the last line, but it is the equivalent of <code>H0<\/code>, which is two bytes instead of five. We can replace two similar occurrences and pare the code of our <code>&lt;path&gt;<\/code> down to this:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;path d=\"M0 0h100v30H0\n         M0 40h45v30H0\n         M55 40h55v30H55\"\/><\/code><\/pre>\n\n\n\n<p>Another 9 bytes shaved off \u2014 how much smaller can we go?<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"bridging-5b-48b-total\">Bridging (-5B, 48B total)<\/h3>\n\n\n<p>The longest commands standing in our way of a fully-optimized SVG pattern are the \u201cmove to\u201d commands which take up 4, 5, and 6 bytes, respectively. One constraint we have is that:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>A path data segment (if there is one) must begin with a &#8220;moveto&#8221; command.<\/p><\/blockquote>\n\n\n\n<p>But that\u2019s okay. The first one is the shortest anyways. If we swap the rows, we can come up with a path definition where we only have to move either horizontally or vertically between the bricks. What if we could use the <code>h<\/code> and <code>v<\/code> commands there instead of <code>M<\/code>?<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2127\" height=\"1370\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_CC3A874441AF9D490DD602D92C31709107FDD676F0B7D1EB1E4D2076D75BD9BB_1644069437592_path.png?resize=2127%2C1370&#038;ssl=1\" alt=\"\" class=\"wp-image-364094\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_CC3A874441AF9D490DD602D92C31709107FDD676F0B7D1EB1E4D2076D75BD9BB_1644069437592_path.png?w=2127&amp;ssl=1 2127w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_CC3A874441AF9D490DD602D92C31709107FDD676F0B7D1EB1E4D2076D75BD9BB_1644069437592_path.png?resize=300%2C193&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_CC3A874441AF9D490DD602D92C31709107FDD676F0B7D1EB1E4D2076D75BD9BB_1644069437592_path.png?resize=1024%2C660&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_CC3A874441AF9D490DD602D92C31709107FDD676F0B7D1EB1E4D2076D75BD9BB_1644069437592_path.png?resize=768%2C495&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_CC3A874441AF9D490DD602D92C31709107FDD676F0B7D1EB1E4D2076D75BD9BB_1644069437592_path.png?resize=1536%2C989&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_CC3A874441AF9D490DD602D92C31709107FDD676F0B7D1EB1E4D2076D75BD9BB_1644069437592_path.png?resize=2048%2C1319&amp;ssl=1 2048w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_CC3A874441AF9D490DD602D92C31709107FDD676F0B7D1EB1E4D2076D75BD9BB_1644069437592_path.png?resize=1000%2C644&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>The path starts from the red dot in the top-left corner. Red are the path commands supported with arrows, black are the coordinates the arrows point to.<\/figcaption><\/figure>\n\n\n\n<p>The above diagram shows how the three shapes can be drawn with a single path. Note that we are leveraging the fact that the <code>fill<\/code> operation automatically closes the open part between <code>(110,0)<\/code> and <code>(0,0)<\/code>. With this rearrangement, we also moved the gap to the left of the full-width brick in the second row. Here\u2019s how the code looks, still broken into one brick per line:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;path d=\"M0 0v30h50V0\n         h10v30h50\n         v10H10v30h100V0\"\/><\/code><\/pre>\n\n\n\n<p>Surely, we\u2019ve found the absolute smallest solution now that we\u2019re down to 48 bytes, right?! Well\u2026<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"digit-trimming-4b-44b-total\">Digit trimming (-4B, 44B total)<\/h3>\n\n\n<p>If you can be a bit flexible with the dimensions, there&#8217;s another little way we can optimize SVG patterns. We&#8217;ve been working with a brick width of <code>100<\/code> pixels, but that\u2019s three bytes. Changing it to <code>90<\/code> means one less byte whenever we need to write it. Similarly, we used a gap of <code>10<\/code> pixels \u2014 but if we change it to <code>8<\/code> instead, we save a byte on each of those occurrences.<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;path d=\"M0 0v30h45V0\n         h8v30h45\n         v8H8v30h90V0\"\/><\/code><\/pre>\n\n\n\n<p>Of course, this also means we have to adjust the pattern dimensions accordingly. Here\u2019s the final optimized SVG pattern code:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;pattern id=\"p\" width=\"98\" height=\"76\" patternUnits=\"userSpaceOnUse\">\n  &lt;path d=\"M0 0v30h45V0h8v30h45v8H8v30h90V0\"\/>\n&lt;\/pattern><\/code><\/pre>\n\n\n\n<p>The second line in the above snippet \u2014 not counting the indentations \u2014 is <strong>44 bytes<\/strong>. We got here from 197 bytes in six iterations. That\u2019s a chunky <strong>77.7% size reduction<\/strong>!<\/p>\n\n\n\n<p>I\u2019m wondering though\u2026 is this really the smallest size possible? Have we looked at all possible ways to optimize SVG patterns?<\/p>\n\n\n\n<p>I invite you to try and further minify this code, or even experiment with alternative methods for optimizing SVG patterns. I would love to see if we could find the true global minimum with the wisdom of the crowd!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-on-creating-and-optimizing-svg-patterns\">More on creating and optimizing SVG patterns<\/h3>\n\n\n<p>If you are interested to learn more about creating and optimizing SVG patterns, read my article about <a href=\"https:\/\/css-tricks.com\/creating-patterns-with-svg-filters\/\">creating patterns with SVG filters<\/a>. Or, if you want to check out a gallery of 60+ patterns, you can view the <a href=\"https:\/\/codepen.io\/collection\/DRMKdB?grid_type=grid\" rel=\"noopener\">PetitePatterns CodePen Collection<\/a>. Lastly, you\u2019re welcome to watch <a href=\"https:\/\/www.youtube.com\/playlist?list=PL59B91voqsL0OeMKH4qImsHdkKQzbzvmJ\" rel=\"noopener\">my tutorials on YouTube<\/a> to help you get even deeper into SVG patterns.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I recently created a brick wall pattern as part of my #PetitePatterns series, a challenge where I create organic-looking patterns or textures in SVG within 560 bytes (or approximately the size of two tweets). To fit this constraint, I have gone through a journey that has taught me some radical ways of optimizing SVG patterns [&hellip;]<\/p>\n","protected":false},"author":250779,"featured_media":364098,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Optimizing SVG Patterns to Their Smallest Size by @finnhvman","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[469,1265,18902],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/bricks-pattern.png?fit=2380%2C1330&ssl=1","jetpack-related-posts":[{"id":262731,"url":"https:\/\/css-tricks.com\/simple-patterns-for-separation\/","url_meta":{"origin":364090,"position":0},"title":"Simple Patterns for Separation (Better Than Color Alone)","date":"November 18, 2017","format":false,"excerpt":"Color is pretty good for separating things. That's what your basic pie chart is, isn't it? You tell the slices apart by color. With enough color contrast, you might be OK, but you might be even better off (particularly where accessibility is concerned) using patterns, or a combination. Patrick Dillon\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":186738,"url":"https:\/\/css-tricks.com\/probably-dont-base64-svg\/","url_meta":{"origin":364090,"position":1},"title":"Probably Don&#8217;t Base64 SVG","date":"October 21, 2014","format":false,"excerpt":"Perhaps you've heard of data URIs. It's a really nice way of including a resource that would have otherwise been a separate HTTP request. The format that you use in a data URI can vary. Essentially you just tell it what content type it is (e.g. image\/png), semicolon, then the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":279419,"url":"https:\/\/css-tricks.com\/preventing-content-reflow-from-lazy-loaded-images\/","url_meta":{"origin":364090,"position":2},"title":"Preventing Content Reflow From Lazy-Loaded Images","date":"November 29, 2018","format":false,"excerpt":"You know the concept of lazy loading images. It prevents the browser from loading images until those images are in (or nearly in) the browser's viewport. There are a plethora of JavaScript-based lazy loading solutions. GitHub has over 3,400 different lazy load repos, and those are just the ones with\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/weightlift-image.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":202043,"url":"https:\/\/css-tricks.com\/understanding-and-manually-improving-svg-optimization\/","url_meta":{"origin":364090,"position":3},"title":"Understanding and Manually Improving SVG Optimization","date":"May 18, 2015","format":false,"excerpt":"The following is a guest post by Raymond Schwartz. Like it's raster brethren, SVG should be optimized before being used on production sites. There are several great tools for that, but as Raymond is about to show you, the best results come from a deeper understanding and a little manual\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":326352,"url":"https:\/\/css-tricks.com\/super-tiny-icons\/","url_meta":{"origin":364090,"position":4},"title":"Super Tiny Icons","date":"November 30, 2020","format":false,"excerpt":"A bunch of SVG icons (of popular things) all under 1KB. SVG is awesome for golfing. I was going to add a CodePen logo but there is already one in there at 375 Bytes. I've got one at 208 Bytes, based on a logo update David DeSandro did for us\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-25-at-12.38.41-PM.png?fit=1200%2C580&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":312443,"url":"https:\/\/css-tricks.com\/creative-background-patterns-using-gradients-css-shapes-and-even-emojis\/","url_meta":{"origin":364090,"position":5},"title":"Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis","date":"June 10, 2020","format":false,"excerpt":"You can create stripes in CSS. That\u2019s all I thought about in terms of CSS background patterns for a long time. There\u2019s nothing wrong with stripes; stripes are cool. They can be customized into wide and narrow bands, criss-crossed into a checked pattern, and played with in other ways using\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/surfer-pattern.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/bricks-pattern.png?fit=1024%2C572&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/364090"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/250779"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=364090"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/364090\/revisions"}],"predecessor-version":[{"id":365140,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/364090\/revisions\/365140"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/364098"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=364090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=364090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=364090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}