{"id":376352,"date":"2023-01-17T05:51:20","date_gmt":"2023-01-17T13:51:20","guid":{"rendered":"https:\/\/css-tricks.com\/?p=376352"},"modified":"2023-01-17T05:51:30","modified_gmt":"2023-01-17T13:51:30","slug":"6-common-svg-fails-and-how-to-fix-them","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/6-common-svg-fails-and-how-to-fix-them\/","title":{"rendered":"6 Common SVG Fails (and How to Fix Them)"},"content":{"rendered":"\n<p>Someone recently asked me how I approach debugging inline SVGs. Because it is part of the DOM, we can inspect any inline SVG in any browser DevTools. And because of that, we have the ability to scope things out and uncover any potential issues or opportunities to optimize the SVG.<\/p>\n\n\n\n<p>But sometimes, we can&#8217;t even see our SVGs at all. In those cases, there are six specific things that I look for when I&#8217;m debugging.<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"1-the-viewbox-values\">1. The <code>viewBox<\/code> values<\/h3>\n\n\n<p>The <code>viewBox<\/code> is a common point of confusion when working with SVG. It\u2019s technically fine to use inline SVG without it, but we would lose one of its most significant benefits: scaling with the container. At the same time, it can work against us when improperly configured, resulting in unwanted clipping.<\/p>\n\n\n\n<p>The elements are there when they\u2019re clipped \u2014 they\u2019re just in a part of the coordinate system that we don\u2019t see. If we were to open the file in some graphics editing program, it might look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1248\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/image1.png?resize=1600%2C1248&#038;ssl=1\" alt=\"Cat line art with part of the drawing outside the artwork area in Illustrator.\" class=\"wp-image-376353\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/image1.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/image1.png?resize=300%2C234&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/image1.png?resize=1024%2C799&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/image1.png?resize=768%2C599&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/image1.png?resize=1536%2C1198&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-element-caption\">Screenshot of SVG opened in Illustrator.<\/figcaption><\/figure>\n\n\n\n<p>The easiest way to fix this? Add <code>overflow=\"visible\"<\/code> to the SVG, whether it\u2019s in our stylesheet, inline on the <code>style<\/code> attribute or directly as an SVG presentation attribute. But if we also apply a <code>background-color<\/code> to the SVG or if we have other elements around it, things might look a little bit off. In this case, the best option will be to edit the <code>viewBox<\/code> to show that part of the coordinate system that was hidden:<\/p>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='270' src='https:\/\/videopress.com\/embed\/mxfhdl4D?cover=1&amp;playsinline=1&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><figcaption>Demo applying <code>overflow=\"hidden\"<\/code> and editing the viewBox.<\/figcaption><\/figure>\n\n\n\n<p>There are a few additional things about the <code>viewBox<\/code> that are worth covering while we&#8217;re on the topic:<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"how-does-the-viewbox-work\">How does the <code>viewBox<\/code> work?<\/h4>\n\n\n<p>SVG is an infinite canvas, but we can control what we see and how we see it through the viewport and the <code>viewBox<\/code>.<\/p>\n\n\n\n<p>The <strong>viewport<\/strong> is a window frame on the infinite canvas. Its dimensions are defined by <code>width<\/code> and <code>height<\/code> attributes, or in CSS with the corresponding <code>width<\/code> and <code>height<\/code> properties. We can specify any length unit we want, but if we provide unitless numbers, they default to pixels.<\/p>\n\n\n\n<p>The <strong><code>viewBox<\/code><\/strong> is defined by four values. The first two are the starting point at the upper-left corner (<code>x<\/code> and <code>y<\/code> values, negative numbers allowed). I\u2019m editing these to reframe the image. The last two are the width and height of the coordinate system inside the viewport \u2014 this is where we can edit the scale of the grid (which we&#8217;ll get into in the section on <a href=\"#aa-zooming\">Zooming<\/a>).<\/p>\n\n\n\n<p>Here\u2019s simplified markup showing the SVG <code>viewBox<\/code> and the <code>width<\/code> and <code>height<\/code> attributes both set on the <code>&lt;svg&gt;<\/code>:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;svg viewBox=\"0 0 700 700\" width=\"700\" height=\"700\">\n  &lt;!-- etc. -->\n&lt;\/svg><\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"reframing\">Reframing<\/h4>\n\n\n<p>So, this:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;svg viewBox=\"0 0 700 700\"><\/code><\/pre>\n\n\n\n<p>&#8230;maps to this:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;svg viewBox=\"start-x-axis start-y-axis width height\"><\/code><\/pre>\n\n\n\n<p>The viewport we see starts where <code>0<\/code> on the x-axis and <code>0<\/code> on the y-axis meet. <\/p>\n\n\n\n<p>By changing this:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;svg viewBox=\"0 0 700 700\"><\/code><\/pre>\n\n\n\n<p> &#8230;to this:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;svg viewBox=\"300 200 700 700\"><\/code><\/pre>\n\n\n\n<p>&#8230;the width and height remain the same (<code>700<\/code> units each), but the start of the coordinate system is now at the <code>300<\/code> point on the x-axis and <code>200<\/code> on the y-axis.<\/p>\n\n\n\n<p>In the following video I\u2019m adding a red <code>&lt;circle&gt;<\/code> to the SVG with its center at the <code>300<\/code> point on the x-axis and <code>200<\/code> on the y-axis. Notice how changing the <code>viewBox<\/code> coordinates to the same values also changes the circle\u2019s placement to the upper-left corner of the frame while the rendered size of the SVG remains the same (<code>700<\/code>\u00d7<code>700<\/code>). All I did was \u201creframe\u201d things with the <code>viewBox<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='270' src='https:\/\/videopress.com\/embed\/R5YRzOad?cover=1&amp;playsinline=1&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"zooming\">Zooming<\/h4>\n\n\n<p>We can change the last two values inside the <code>viewBox<\/code> to zoom in or out of the image. The larger the values, the more SVG units are added to fit in the viewport, resulting in a smaller image. If we want to keep a 1:1 ratio, our <code>viewBox<\/code> width and height must match our viewport width and height values.<\/p>\n\n\n\n<p>Let\u2019s see what happens in Illustrator when we change these parameters. The artboard is the <code>viewport<\/code> which is represented by a white 700px square. Everything else outside that area is our infinite SVG canvas and gets clipped by default.<\/p>\n\n\n\n<p>Figure 1 below shows a blue dot at <code>900<\/code> along the x-axis and <code>900<\/code> along the y-axis. If I change the last two <code>viewBox<\/code> values from <code>700<\/code> to <code>900<\/code> like this: <\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;svg viewBox=\"300 200 900 900\" width=\"700\" height=\"700\"><\/code><\/pre>\n\n\n\n<p>&#8230;then the blue dot is almost fully back in view, as seen in Figure 2 below. Our image is scaled down because we increased the viewBox values, but the SVG&#8217;s actual width and height dimensions remained the same, and the blue dot made its way back closer to the unclipped area.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/paper-attachments.dropboxusercontent.com\/s_98983405540DE6AC6FF1FB8CD6AC67C8DA633DF0C1DBFD5F387099D1138A281D_1671334088957_Screen+Shot+2022-12-18+at+12.09.00+AM.png?ssl=1\" alt=\"Figure 1.\" data-recalc-dims=\"1\"\/><figcaption class=\"wp-element-caption\">Figure 1<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/paper-attachments.dropboxusercontent.com\/s_98983405540DE6AC6FF1FB8CD6AC67C8DA633DF0C1DBFD5F387099D1138A281D_1671334088910_Screen+Shot+2022-12-18+at+12.17.37+AM.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption class=\"wp-element-caption\">Figure 2<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>There is a pink square as evidence of how the grid scales to fit the viewport: the unit gets smaller, and more grid lines fit into the same viewport area. You can play with the same values in the following Pen to see that work in action:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bGKyprL\" src=\"\/\/codepen.io\/anon\/embed\/bGKyprL?height=450&amp;theme-id=1&amp;slug-hash=bGKyprL&amp;default-tab=html,result&amp;editable=true\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bGKyprL\" title=\"CodePen Embed bGKyprL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"2-missing-width-and-height\">2. Missing <code>width<\/code> and <code>height<\/code><\/h3>\n\n\n<p>Another common thing I look at when debugging inline SVG is whether the markup contains the <code>width<\/code> or <code>height<\/code> attributes. This is no big deal in many cases unless the SVG is inside a container with absolute positioning or a flexible container (as Safari computes the SVG <code>width<\/code> value with <code>0px<\/code> instead of <code>auto<\/code>). Excluding <code>width<\/code> or <code>height<\/code> in these cases prevents us from seeing the full image, as we can see by <a href=\"https:\/\/codepen.io\/marianab\/pen\/WNyBxYN\" rel=\"noopener\">opening this CodePen demo<\/a> and comparing it in Chrome, Safari, and Firefox (tap images for larger view).<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034930676_Screenshot2022-12-14at9.21.57AM.png?ssl=1\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"705\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034930676_Screenshot2022-12-14at9.21.57AM.png?resize=1024%2C705&#038;ssl=1\" alt=\"\" class=\"wp-image-376365\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034930676_Screenshot2022-12-14at9.21.57AM.png?resize=1024%2C705&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034930676_Screenshot2022-12-14at9.21.57AM.png?resize=300%2C207&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034930676_Screenshot2022-12-14at9.21.57AM.png?resize=768%2C529&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034930676_Screenshot2022-12-14at9.21.57AM.png?resize=1536%2C1058&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034930676_Screenshot2022-12-14at9.21.57AM.png?resize=2048%2C1410&amp;ssl=1 2048w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/a><figcaption class=\"wp-element-caption\">Chrome<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034695940_Screenshot2022-12-14at9.18.11AM.png?ssl=1\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"707\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034695940_Screenshot2022-12-14at9.18.11AM.png?resize=1024%2C707&#038;ssl=1\" alt=\"\" class=\"wp-image-376366\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034695940_Screenshot2022-12-14at9.18.11AM.png?resize=1024%2C707&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034695940_Screenshot2022-12-14at9.18.11AM.png?resize=300%2C207&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034695940_Screenshot2022-12-14at9.18.11AM.png?resize=768%2C530&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034695940_Screenshot2022-12-14at9.18.11AM.png?resize=1536%2C1060&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034695940_Screenshot2022-12-14at9.18.11AM.png?resize=2048%2C1413&amp;ssl=1 2048w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/a><figcaption class=\"wp-element-caption\">Safari<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034822829_Screenshot2022-12-14at9.19.58AM.png?ssl=1\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"705\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034822829_Screenshot2022-12-14at9.19.58AM.png?resize=1024%2C705&#038;ssl=1\" alt=\"\" class=\"wp-image-376367\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034822829_Screenshot2022-12-14at9.19.58AM.png?resize=1024%2C705&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034822829_Screenshot2022-12-14at9.19.58AM.png?resize=300%2C207&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034822829_Screenshot2022-12-14at9.19.58AM.png?resize=768%2C529&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034822829_Screenshot2022-12-14at9.19.58AM.png?resize=1536%2C1058&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_B0DCE4A19A942C462A11420229358480AEB15CA8CF78372F447791CD453465E1_1671034822829_Screenshot2022-12-14at9.19.58AM.png?resize=2048%2C1410&amp;ssl=1 2048w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/a><figcaption class=\"wp-element-caption\">Firefox<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>The solution? Add a width or height, whether as a presentation attribute,&nbsp;inline in the&nbsp;style&nbsp;attribute, or in CSS. Avoid using height by itself, particularly when it is set to&nbsp;<code>100%<\/code>&nbsp;or&nbsp;<code>auto<\/code>. Another workaround is to <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/position#:~:text=Most%20of%20the,as%20auto.\" target=\"_blank\" rel=\"noreferrer noopener\">set the&nbsp;right&nbsp;<em>and<\/em>&nbsp;left&nbsp;values<\/a>. <\/p>\n\n\n\n<p>You can play around with&nbsp;<a href=\"https:\/\/codepen.io\/marianab\/pen\/WNyBxYN\" target=\"_blank\" rel=\"noreferrer noopener\">the following Pen&nbsp;<\/a>and combine the different options.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNyBxYN\" src=\"\/\/codepen.io\/anon\/embed\/WNyBxYN?height=450&amp;theme-id=1&amp;slug-hash=WNyBxYN&amp;default-tab=html,result&amp;editable=true\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNyBxYN\" title=\"CodePen Embed WNyBxYN\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"3-inadvertent-fill-and-stroke-colors\">3. Inadvertent <code>fill<\/code> and <code>stroke<\/code> colors<\/h3>\n\n\n<p>It may also be that we are applying color to the <code>&lt;svg&gt;<\/code> tag, whether it&#8217;s an inline style or coming from CSS. That&#8217;s fine, but there could be other color values throughout the markup or styles that conflict with the color set on the <code>&lt;svg&gt;<\/code>, causing parts to be invisible.<\/p>\n\n\n\n<p>That&#8217;s why I tend to look for the <code>fill<\/code> and <code>stroke<\/code> attributes in the SVG&#8217;s markup and wipe them out. The following video shows an SVG I styled in CSS with a red <code>fill<\/code>. There are a couple of instances where parts of the SVG are filled in white directly in the markup that I removed to reveal the missing pieces.<\/p>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='263' src='https:\/\/videopress.com\/embed\/eJJJHqs7?cover=1&amp;playsinline=1&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"4-missing-ids\">4. Missing IDs<\/h3>\n\n\n<p>This one might seem super obvious, but you\u2019d be surprised how often I see it come up. Let\u2019s say we made an SVG file in Illustrator and were very diligent about naming our layers so that you get nice matching IDs in the markup when exporting the file. And let\u2019s say we plan to style that SVG in CSS by hooking into those IDs.<\/p>\n\n\n\n<p>That\u2019s a nice way to do things. But there are plenty of times where I\u2019ve seen the same SVG file exported a second time to the same location and the IDs are different, usually when copy\/pasting the vectors directly. Maybe a new layer was added, or one of the existing ones was renamed or something. Whatever the case, the CSS rules no longer match the IDs in the SVG markup, causing the SVG to render differently than you\u2019d expect.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1016\" height=\"328\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_98983405540DE6AC6FF1FB8CD6AC67C8DA633DF0C1DBFD5F387099D1138A281D_1671455510189_underscores3.png?resize=1016%2C328&#038;ssl=1\" alt=\"Underscores with numbers after the element IDs\" class=\"wp-image-376371\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_98983405540DE6AC6FF1FB8CD6AC67C8DA633DF0C1DBFD5F387099D1138A281D_1671455510189_underscores3.png?w=1016&amp;ssl=1 1016w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_98983405540DE6AC6FF1FB8CD6AC67C8DA633DF0C1DBFD5F387099D1138A281D_1671455510189_underscores3.png?resize=300%2C97&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_98983405540DE6AC6FF1FB8CD6AC67C8DA633DF0C1DBFD5F387099D1138A281D_1671455510189_underscores3.png?resize=768%2C248&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-element-caption\">Pasting Illustrator&#8217;s exported SVG file into SVGOMG.<\/figcaption><\/figure>\n\n\n\n<p>In large SVG files we might find it difficult to find those IDs. This is a good time to open the DevTools, inspect that part of the graphic that\u2019s not working, and see if those IDs are still matching. <\/p>\n\n\n\n<p>So, I&#8217;d say it&#8217;s worth opening an exported SVG file in a code editor and comparing it to the original before swapping things out. Apps like Illustrator, Figma, and Sketch are smart, but that doesn\u2019t mean we aren\u2019t responsible for vetting them.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"5-checklist-for-clipping-and-masking\">5. Checklist for clipping and masking<\/h3>\n\n\n<p>If an SVG is unexpectedly clipped and the <code>viewBox<\/code> checks out alright, I usually look at the CSS for <code>clip-path<\/code> or <code>mask<\/code> properties that might interfere with the image. It\u2019s tempting to keep looking at the inline markup, but it\u2019s good to remember that an SVG\u2019s styling might be happening elsewhere.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/clipping-masking-css\/\">CSS clipping and masking<\/a> allow us to &#8220;hide&#8221; parts of an image or element. In SVG, <code>&lt;clipPath&gt;<\/code> is a vector operation that cuts parts of an image with no halfway results. The <code>&lt;mask&gt;<\/code> tag is a pixel operation that allows transparency, semi-transparency effects, and blurred edges.<\/p>\n\n\n\n<p>This is a small checklist for debugging cases where clipping and masking are involved:<\/p>\n\n\n\n<ul>\n<li>Make sure the clipping path (or mask) and the graphic overlap one another. The overlapping parts are what gets displayed.<\/li>\n\n\n\n<li>If you have a complex path that is not intersecting your graphic, try applying transforms until they match.<\/li>\n\n\n\n<li>You can still inspect the inner code with the DevTools even though the <code>&lt;clipPath&gt;<\/code> or <code>&lt;mask&gt;<\/code> are not rendered, so use it!<\/li>\n\n\n\n<li>Copy the markup inside <code>&lt;clipPath&gt;<\/code> and <code>&lt;mask&gt;<\/code> and paste it before closing the <code>&lt;\/svg&gt;<\/code> tag. Then add a <code>fill<\/code> to those shapes and check the SVG&#8217;s coordinates and dimensions. If you still do not see the image, try adding <code>overflow=\"hidden\"<\/code> to the <code>&lt;svg&gt;<\/code> tag.<\/li>\n\n\n\n<li>Check that a <strong>unique<\/strong> ID is used for the <code>&lt;clipPath&gt;<\/code> or <code>&lt;mask&gt;<\/code>, and that the same ID is applied to the shapes or group of shapes that are clipped or masked. A mismatched ID will break the appearance.<\/li>\n\n\n\n<li>Check for typos in the markup between the <code>&lt;clipPath&gt;<\/code> or <code>&lt;mask&gt;<\/code> tags.<\/li>\n\n\n\n<li><code>fill<\/code>, <code>stroke<\/code>, <code>opacity<\/code>, or some other styles applied to the elements inside <code>&lt;clipPath&gt;<\/code> are useless \u2014 the only useful part is the fill-region geometry of those elements. That&#8217;s why if you use a <code>&lt;polyline&gt;<\/code> it will behave as a <code>&lt;polygon&gt;<\/code> and if you use a <code>&lt;line&gt;<\/code> you won&#8217;t see any clipping effect.<\/li>\n\n\n\n<li>If you don&#8217;t see your image after applying a <code>&lt;mask&gt;<\/code>, make sure that the <code>fill<\/code> of the masking content is not entirely black. The luminance of the masking element determines the opacity of the final graphic. You&#8217;ll be able to see through the brighter parts, and the darker parts will hide your image&#8217;s content.<\/li>\n<\/ul>\n\n\n\n<p>You can play with masked and clipped elements in&nbsp;<a href=\"https:\/\/codepen.io\/marianab\/pen\/mdjdGZj\" target=\"_blank\" rel=\"noreferrer noopener\">this Pen<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"6-namespaces\">6. Namespaces<\/h3>\n\n\n<p>Did you know that SVG is an XML-based markup language? Well, it is! The namespace for SVG is set on the <code>xmlns<\/code> attribute:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n  &lt;!-- etc. -->\n&lt;\/svg><\/code><\/pre>\n\n\n\n<p>There\u2019s a lot to know about namespacing in XML and MDN has a great primer on it. Suffice to say, the namespace provides context to the browser, informing it that the markup is specific to SVG. The idea is that namespaces help prevent conflicts when more than one type of XML is in the same file, like SVG and XHTML. This is a much less common issue in modern browsers but could help explain SVG rendering issues in older browsers or browsers like Gecko that are strict when defining doctypes and namespaces.<\/p>\n\n\n\n<p>The SVG 2 specification <a href=\"https:\/\/www.w3.org\/TR\/SVG2\/struct.html#Namespace\" rel=\"noopener\">does not require namespacing<\/a> when using HTML syntax. But <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Namespaces_Crash_Course#conclusion\" rel=\"noopener\">it\u2019s crucial<\/a> if support for legacy browsers is a priority \u2014 plus, it doesn\u2019t hurt anything to add it. That way, when the <code>&lt;html&gt;<\/code> element\u2019s <code>xmlns<\/code> attribute is defined, it will not conflict in those rare cases.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;html lang=\"en\" xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n  &lt;body>\n    &lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"700px\" height=\"700px\">\n      &lt;!-- etc. -->\n    &lt;\/svg>\n  &lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>This is also true when using inline SVG in CSS, like setting it as a background image. In the following example, a checkmark icon appears on the input after successful validation. This is what the CSS looks like:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">textarea:valid {\n background: white url('data:image\/svg+xml,\\\n    &lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"26\" height=\"26\">\\\n    &lt;circle cx=\"13\" cy=\"13\" r=\"13\" fill=\"%23abedd8\"\/>\\\n    &lt;path fill=\"none\" stroke=\"white\" stroke-width=\"2\" d=\"M5 15.2l5 5 10-12\"\/>\\\n    &lt;\/svg>') no-repeat 98% 5px;\n}<\/code><\/pre>\n\n\n\n<p>When we remove the namespace inside the SVG in the background property, the image disappears:<\/p>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='259' src='https:\/\/videopress.com\/embed\/KPB53ZJT?cover=1&amp;posterUrl=https%3A%2F%2Fcss-tricks.com%2Fwp-content%2Fuploads%2F2022%2F12%2Fsvg-css-1_mp4_dvd.original.jpg&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n\n<p>Another common namespace prefix is <code>xlink:href<\/code>. We use it a lot when referencing other parts of the SVG like: patterns, filters, animations or gradients. The recommendation is to start replacing it with <code>href<\/code> as the other one is being deprecated since SVG 2, but there might be compatibility issues with older browsers. In that case, we can use both. Just remember to include the namespace <code>xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"<\/code> if you are still using <code>xlink:href<\/code>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"level-up-your-svg-skills\">Level up your SVG skills!<\/h3>\n\n\n<p>I hope these tips help save you a ton of time if you find yourself troubleshooting improperly rendered inline SVGs. These are just the things I look for. Maybe you have different red flags you watch for \u2014 if so, tell me in the comments!<\/p>\n\n\n\n<p>The bottom line is that it pays to have at least a basic understanding of <a href=\"https:\/\/css-tricks.com\/using-svg\/\">the various ways SVG can be used<\/a>. <a href=\"https:\/\/codepen.io\/challenges\" rel=\"noopener\">CodePen Challenges<\/a> often incorporate SVG and offer good practice. Here are a few more resources to level up:<\/p>\n\n\n\n<ul>\n<li><em><a href=\"https:\/\/www.oreilly.com\/library\/view\/using-svg-with\/9781491921968\/\" rel=\"noopener\">Using SVG with CSS3 and HTML5<\/a><\/em> (Amelia Bellamy-Royds,&nbsp;Kurt Cagle,&nbsp;Dudley Storey) \u2014 I consider it the SVG Bible.<\/li>\n\n\n\n<li>Lea Verou has a wealth of SVG knowledge and <a href=\"https:\/\/lea.verou.me\/speaking\/\" rel=\"noopener\">has spoken on the topic<\/a> quite a bit (like <a href=\"https:\/\/www.youtube.com\/watch?v=6qSN50Qk_54\" rel=\"noopener\">this video from Frontend United 2019<\/a>).<\/li>\n\n\n\n<li><a href=\"https:\/\/www.oreilly.com\/library\/view\/svg-animations\/9781491939697\/\" rel=\"noopener\"><em>SVG Animations<\/em><\/a> (Sarah Drasner)<\/li>\n\n\n\n<li><a href=\"https:\/\/www.oreilly.com\/library\/view\/svg-essentials-2nd\/9781491945308\/\" rel=\"noopener\"><em>SVG Essentials<\/em><\/a> (Amelia Bellamy-Royds, J. David Eisenberg)<\/li>\n\n\n\n<li><a href=\"https:\/\/abookapart.com\/products\/practical-svg\" rel=\"noopener\"><em>Practical SVG<\/em><\/a> (Chris Coyier)<\/li>\n<\/ul>\n\n\n\n<p>There are a few people I suggest following for SVG-related goodness:<\/p>\n\n\n\n<ul>\n<li><a href=\"https:\/\/www.sarasoueidan.com\/\" rel=\"noopener\">Sara Soueidan<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.snorkl.tv\/\" rel=\"noopener\">Carl Schoof<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.cassie.codes\/\" rel=\"noopener\">Cassie Evans<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/valhead.com\/\" rel=\"noopener\">Val Head<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/codepen.io\/thebabydino\" rel=\"noopener\">Ana Tudor<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Someone recently asked me how I approach debugging inline SVGs. Because it is part of the DOM, we can inspect any inline SVG in any browser DevTools. And because of that, we have the ability to scope things out and uncover any potential issues or opportunities to optimize the SVG. But sometimes, we can&#8217;t even [&hellip;]<\/p>\n","protected":false},"author":274059,"featured_media":287615,"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":"6 Common SVG Fails (and How to Fix Them) by @marianabeldi","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/css-tricks.com\/wp-content\/uploads\/2019\/05\/strategy.svg","jetpack-related-posts":[{"id":340692,"url":"https:\/\/css-tricks.com\/svg-loader-a-different-way-to-work-with-external-svg\/","url_meta":{"origin":376352,"position":0},"title":"svg-loader: A Different Way to Work With External SVG","date":"May 19, 2021","format":false,"excerpt":"SVGs are awesome: they are small, look sharp on any scale, and can be customized without creating a separate file. However, there is something I feel is missing in web standards today: a way to include them as an external file that also retains the format\u2019s customization powers. For instance,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/svg-box.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":192227,"url":"https:\/\/css-tricks.com\/scale-svg\/","url_meta":{"origin":376352,"position":1},"title":"How to Scale SVG","date":"January 6, 2015","format":false,"excerpt":"The following is a guest post by Amelia Bellamy-Royds. Amelia has lots of experience with SVG, as the co-author of\u00a0SVG Essentials\u00a0and author of the upcoming\u00a0Using SVG with CSS3 and HTML5. Amelia and I both will be speaking on SVG at the upcoming\u00a0RWD Summit\u00a0as well! Here, she shares an epic guide\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":319085,"url":"https:\/\/css-tricks.com\/heres-how-i-solved-a-weird-bug-using-tried-and-true-debugging-strategies\/","url_meta":{"origin":376352,"position":2},"title":"Here\u2019s How I Solved a Weird Bug Using Tried and True Debugging Strategies","date":"August 28, 2020","format":false,"excerpt":"Remember the last time you dealt with a UI-related bug that left you scratching your head for hours? Maybe the issue was happening at random, or occurring under specific circumstances (device, OS, browser, user action), or was just hidden in one of the many front-end technologies that are part of\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/iNLqCBSg.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":175074,"url":"https:\/\/css-tricks.com\/mega-list-svg-information\/","url_meta":{"origin":376352,"position":3},"title":"A Compendium of SVG Information","date":"July 22, 2014","format":false,"excerpt":"A huge pile of information about SVG. How to Use SVG These are overview articles covering lots of stuff relating to SVG. Why to use it and the basics of how to use it. Mostly: , background-image, , , and \/. Using SVG by me SVG on the Web \u2014\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":373111,"url":"https:\/\/css-tricks.com\/how-i-made-an-icon-system-out-of-css-custom-properties\/","url_meta":{"origin":376352,"position":4},"title":"How I Made an Icon System Out of CSS Custom Properties","date":"September 22, 2022","format":false,"excerpt":"SVG is the best format for icons on a website, there is no doubt about that. It allows you to have sharp icons no matter the screen pixel density, you can change the styles of the SVG on hover and you can even animate the icons with CSS or JavaScript.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/icon-svg-custom-property.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":266365,"url":"https:\/\/css-tricks.com\/making-svg-icon-libraries-for-react-apps\/","url_meta":{"origin":376352,"position":5},"title":"Making SVG icon libraries for React apps","date":"December 14, 2018","format":false,"excerpt":"Nicolas Gallagher: At Twitter I used the approach described here to publish the company\u2019s SVG icon library in several different formats: optimized SVGs, plain JavaScript modules, React DOM components, and React Native components. There is no One True Way\u00a9 to make an SVG icon system. The only thing that SVG\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/react-recompose-hand.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/css-tricks.com\/wp-content\/uploads\/2019\/05\/strategy.svg","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376352"}],"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\/274059"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=376352"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376352\/revisions"}],"predecessor-version":[{"id":376512,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376352\/revisions\/376512"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/287615"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=376352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=376352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=376352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}