[{"data":1,"prerenderedAt":707},["ShallowReactive",2],{"guide-base64-svg-embedding":3},{"id":4,"title":5,"body":6,"date":699,"description":700,"extension":701,"meta":702,"navigation":646,"path":703,"readingTime":157,"seo":704,"stem":705,"__hash__":706},"guides\u002Fguides\u002Fbase64-svg-embedding.md","Embedding SVG as Base64 in CSS",{"type":7,"value":8,"toc":692},"minimark",[9,13,18,25,165,171,242,288,292,295,309,405,415,421,427,431,434,454,494,520,526,532,536,539,595,598,602,605,676,679,688],[10,11,12],"p",{},"Scalable Vector Graphics (SVG) are the go-to format for icons, logos, and decorative elements on the web. When embedding SVG into your project, two approaches dominate: inlining the SVG markup directly in the HTML, or encoding the SVG as a Base64 data URI in your CSS. Each technique has distinct trade-offs in performance, caching, maintainability, and styling flexibility.",[14,15,17],"h2",{"id":16},"the-two-approaches-compared","The Two Approaches Compared",[10,19,20,24],{},[21,22,23],"strong",{},"Inline SVG"," places the actual SVG markup inside your HTML document:",[26,27,32],"pre",{"className":28,"code":29,"language":30,"meta":31,"style":31},"language-html shiki shiki-themes github-light github-dark","\u003Cbutton>\n  \u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" viewBox=\"0 0 24 24\" width=\"20\" height=\"20\">\n    \u003Ccircle cx=\"12\" cy=\"12\" r=\"10\" fill=\"currentColor\"\u002F>\n  \u003C\u002Fsvg>\n  Submit\n\u003C\u002Fbutton>\n","html","",[33,34,35,51,96,139,149,155],"code",{"__ignoreMap":31},[36,37,40,44,48],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"sVt8B","\u003C",[36,45,47],{"class":46},"s9eBZ","button",[36,49,50],{"class":42},">\n",[36,52,54,57,60,64,67,71,74,76,79,82,84,87,90,92,94],{"class":38,"line":53},2,[36,55,56],{"class":42},"  \u003C",[36,58,59],{"class":46},"svg",[36,61,63],{"class":62},"sScJk"," xmlns",[36,65,66],{"class":42},"=",[36,68,70],{"class":69},"sZZnC","\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\"",[36,72,73],{"class":62}," viewBox",[36,75,66],{"class":42},[36,77,78],{"class":69},"\"0 0 24 24\"",[36,80,81],{"class":62}," width",[36,83,66],{"class":42},[36,85,86],{"class":69},"\"20\"",[36,88,89],{"class":62}," height",[36,91,66],{"class":42},[36,93,86],{"class":69},[36,95,50],{"class":42},[36,97,99,102,105,108,110,113,116,118,120,123,125,128,131,133,136],{"class":38,"line":98},3,[36,100,101],{"class":42},"    \u003C",[36,103,104],{"class":46},"circle",[36,106,107],{"class":62}," cx",[36,109,66],{"class":42},[36,111,112],{"class":69},"\"12\"",[36,114,115],{"class":62}," cy",[36,117,66],{"class":42},[36,119,112],{"class":69},[36,121,122],{"class":62}," r",[36,124,66],{"class":42},[36,126,127],{"class":69},"\"10\"",[36,129,130],{"class":62}," fill",[36,132,66],{"class":42},[36,134,135],{"class":69},"\"currentColor\"",[36,137,138],{"class":42},"\u002F>\n",[36,140,142,145,147],{"class":38,"line":141},4,[36,143,144],{"class":42},"  \u003C\u002F",[36,146,59],{"class":46},[36,148,50],{"class":42},[36,150,152],{"class":38,"line":151},5,[36,153,154],{"class":42},"  Submit\n",[36,156,158,161,163],{"class":38,"line":157},6,[36,159,160],{"class":42},"\u003C\u002F",[36,162,47],{"class":46},[36,164,50],{"class":42},[10,166,167,170],{},[21,168,169],{},"Base64 data URI"," encodes the SVG file as a string and references it from CSS:",[26,172,176],{"className":173,"code":174,"language":175,"meta":31,"style":31},"language-css shiki shiki-themes github-light github-dark",".icon-circle {\n  background-image: url(\"data:image\u002Fsvg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+\");\n  width: 20px;\n  height: 20px;\n}\n","css",[33,177,178,186,207,224,237],{"__ignoreMap":31},[36,179,180,183],{"class":38,"line":39},[36,181,182],{"class":62},".icon-circle",[36,184,185],{"class":42}," {\n",[36,187,188,192,195,198,201,204],{"class":38,"line":53},[36,189,191],{"class":190},"sj4cs","  background-image",[36,193,194],{"class":42},": ",[36,196,197],{"class":190},"url",[36,199,200],{"class":42},"(",[36,202,203],{"class":69},"\"data:image\u002Fsvg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+\"",[36,205,206],{"class":42},");\n",[36,208,209,212,214,217,221],{"class":38,"line":98},[36,210,211],{"class":190},"  width",[36,213,194],{"class":42},[36,215,216],{"class":190},"20",[36,218,220],{"class":219},"szBVR","px",[36,222,223],{"class":42},";\n",[36,225,226,229,231,233,235],{"class":38,"line":141},[36,227,228],{"class":190},"  height",[36,230,194],{"class":42},[36,232,216],{"class":190},[36,234,220],{"class":219},[36,236,223],{"class":42},[36,238,239],{"class":38,"line":151},[36,240,241],{"class":42},"}\n",[26,243,245],{"className":28,"code":244,"language":30,"meta":31,"style":31},"\u003Cbutton>\n  \u003Cspan class=\"icon-circle\">\u003C\u002Fspan>\n  Submit\n\u003C\u002Fbutton>\n",[33,246,247,255,276,280],{"__ignoreMap":31},[36,248,249,251,253],{"class":38,"line":39},[36,250,43],{"class":42},[36,252,47],{"class":46},[36,254,50],{"class":42},[36,256,257,259,261,264,266,269,272,274],{"class":38,"line":53},[36,258,56],{"class":42},[36,260,36],{"class":46},[36,262,263],{"class":62}," class",[36,265,66],{"class":42},[36,267,268],{"class":69},"\"icon-circle\"",[36,270,271],{"class":42},">\u003C\u002F",[36,273,36],{"class":46},[36,275,50],{"class":42},[36,277,278],{"class":38,"line":98},[36,279,154],{"class":42},[36,281,282,284,286],{"class":38,"line":141},[36,283,160],{"class":42},[36,285,47],{"class":46},[36,287,50],{"class":42},[14,289,291],{"id":290},"when-to-use-base64-svg-in-css","When to Use Base64 SVG in CSS",[10,293,294],{},"Base64 embedding in CSS is the right choice for several scenarios:",[10,296,297,300,301,304,305,308],{},[21,298,299],{},"Pseudo-element icons."," CSS pseudo-elements (",[33,302,303],{},"::before",", ",[33,306,307],{},"::after",") cannot contain child HTML elements, so inline SVG is impossible. Data URIs are the only way to add SVG icons via pseudo-elements:",[26,310,312],{"className":173,"code":311,"language":175,"meta":31,"style":31},".link-external::after {\n  content: '';\n  display: inline-block;\n  width: 14px;\n  height: 14px;\n  margin-left: 4px;\n  background-image: url(\"data:image\u002Fsvg+xml;base64,...\");\n}\n",[33,313,314,321,333,345,358,370,384,400],{"__ignoreMap":31},[36,315,316,319],{"class":38,"line":39},[36,317,318],{"class":62},".link-external::after",[36,320,185],{"class":42},[36,322,323,326,328,331],{"class":38,"line":53},[36,324,325],{"class":190},"  content",[36,327,194],{"class":42},[36,329,330],{"class":69},"''",[36,332,223],{"class":42},[36,334,335,338,340,343],{"class":38,"line":98},[36,336,337],{"class":190},"  display",[36,339,194],{"class":42},[36,341,342],{"class":190},"inline-block",[36,344,223],{"class":42},[36,346,347,349,351,354,356],{"class":38,"line":141},[36,348,211],{"class":190},[36,350,194],{"class":42},[36,352,353],{"class":190},"14",[36,355,220],{"class":219},[36,357,223],{"class":42},[36,359,360,362,364,366,368],{"class":38,"line":151},[36,361,228],{"class":190},[36,363,194],{"class":42},[36,365,353],{"class":190},[36,367,220],{"class":219},[36,369,223],{"class":42},[36,371,372,375,377,380,382],{"class":38,"line":157},[36,373,374],{"class":190},"  margin-left",[36,376,194],{"class":42},[36,378,379],{"class":190},"4",[36,381,220],{"class":219},[36,383,223],{"class":42},[36,385,387,389,391,393,395,398],{"class":38,"line":386},7,[36,388,191],{"class":190},[36,390,194],{"class":42},[36,392,197],{"class":190},[36,394,200],{"class":42},[36,396,397],{"class":69},"\"data:image\u002Fsvg+xml;base64,...\"",[36,399,206],{"class":42},[36,401,403],{"class":38,"line":402},8,[36,404,241],{"class":42},[10,406,407,410,411,414],{},[21,408,409],{},"Background patterns and decorative fills."," Repeating SVG patterns used as ",[33,412,413],{},"background-image"," must be referenced as URLs or data URIs—they cannot be inlined as HTML children of the styled element.",[10,416,417,420],{},[21,418,419],{},"Component library encapsulation."," When distributing a CSS-only component library without requiring users to add SVG markup to their HTML, embedding icons as data URIs keeps everything self-contained within the stylesheet.",[10,422,423,426],{},[21,424,425],{},"Caching benefit."," An SVG referenced as a data URI in a cached CSS file will be cached along with that stylesheet. If the same icon appears on every page, the CSS cache carries the icon across all pages without additional HTTP requests.",[14,428,430],{"id":429},"when-to-use-inline-svg","When to Use Inline SVG",[10,432,433],{},"Inline SVG wins in these situations:",[10,435,436,439,440,443,444,304,447,304,450,453],{},[21,437,438],{},"Dynamic styling with CSS."," Inline SVG elements respond to CSS ",[33,441,442],{},"color"," via ",[33,445,446],{},"currentColor",[33,448,449],{},"fill",[33,451,452],{},"stroke",", and other properties. Data URI SVGs are opaque images—you cannot style their internal elements from the parent page's CSS:",[26,455,457],{"className":173,"code":456,"language":175,"meta":31,"style":31},"\u002F* Works with inline SVG, ignored by data URI *\u002F\n.btn:hover svg circle {\n  fill: red;\n}\n",[33,458,459,465,478,490],{"__ignoreMap":31},[36,460,461],{"class":38,"line":39},[36,462,464],{"class":463},"sJ8bj","\u002F* Works with inline SVG, ignored by data URI *\u002F\n",[36,466,467,470,473,476],{"class":38,"line":53},[36,468,469],{"class":62},".btn:hover",[36,471,472],{"class":46}," svg",[36,474,475],{"class":46}," circle",[36,477,185],{"class":42},[36,479,480,483,485,488],{"class":38,"line":98},[36,481,482],{"class":190},"  fill",[36,484,194],{"class":42},[36,486,487],{"class":190},"red",[36,489,223],{"class":42},[36,491,492],{"class":38,"line":141},[36,493,241],{"class":42},[10,495,496,499,500,503,504,507,508,511,512,515,516,519],{},[21,497,498],{},"Accessibility."," Inline SVG supports ",[33,501,502],{},"\u003Ctitle>"," and ",[33,505,506],{},"\u003Cdesc>"," elements for screen readers, and ",[33,509,510],{},"role=\"img\""," with ",[33,513,514],{},"aria-labelledby"," for accessible names. Data URI images are treated as opaque images and can only use ",[33,517,518],{},"alt"," text on the container element.",[10,521,522,525],{},[21,523,524],{},"Smaller file size for small icons."," Base64 encoding expands data by approximately 33%. A 200-byte SVG becomes roughly 268 bytes as Base64. For tiny icons, the encoding overhead may exceed any caching benefit.",[10,527,528,531],{},[21,529,530],{},"Manipulation with JavaScript."," Inline SVG exposes its DOM, allowing scripts to animate paths, change attributes, or respond to events on individual shapes. Data URI SVGs are non-interactive images.",[14,533,535],{"id":534},"size-and-performance-trade-offs","Size and Performance Trade-Offs",[10,537,538],{},"The decision often comes down to how often the SVG repeats and how large it is:",[540,541,542,558],"table",{},[543,544,545],"thead",{},[546,547,548,552,555],"tr",{},[549,550,551],"th",{},"SVG Size",[549,553,554],{},"Used Once",[549,556,557],{},"Used on 10+ Pages",[559,560,561,573,584],"tbody",{},[546,562,563,567,570],{},[564,565,566],"td",{},"\u003C 500 bytes",[564,568,569],{},"Inline SVG (no Base64 overhead)",[564,571,572],{},"Either (caching benefits offset overhead)",[546,574,575,578,581],{},[564,576,577],{},"500B – 5KB",[564,579,580],{},"Inline SVG (avoid blocking CSS render)",[564,582,583],{},"Base64 in CSS (cache saves repeated downloads)",[546,585,586,589,592],{},[564,587,588],{},"> 5KB",[564,590,591],{},"External file (keep HTML lean)",[564,593,594],{},"External file with cache headers",[10,596,597],{},"Large data URIs in CSS force the browser to parse the entire stylesheet before rendering, which can block the first paint. Critical CSS should avoid embedding large SVGs as data URIs.",[14,599,601],{"id":600},"url-encoding-vs-base64-for-svg-data-uris","URL-Encoding vs Base64 for SVG Data URIs",[10,603,604],{},"Base64 is not the only encoding option. URL-encoding the SVG XML is often more compact for small files:",[26,606,608],{"className":173,"code":607,"language":175,"meta":31,"style":31},"\u002F* URL-encoded (smaller for tiny SVGs) *\u002F\nbackground-image: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ccc'\u002F%3E%3C\u002Fsvg%3E\");\n\n\u002F* Base64-encoded (better for larger SVGs) *\u002F\nbackground-image: url(\"data:image\u002Fsvg+xml;base64,PHN2Zy...\");\n",[33,609,610,615,642,648,653],{"__ignoreMap":31},[36,611,612],{"class":38,"line":39},[36,613,614],{"class":463},"\u002F* URL-encoded (smaller for tiny SVGs) *\u002F\n",[36,616,617,619,622,625,628,630,633,636,639],{"class":38,"line":53},[36,618,413],{"class":46},[36,620,621],{"class":42},": url(\"",[36,623,624],{"class":46},"data",[36,626,627],{"class":42},":image\u002F",[36,629,59],{"class":46},[36,631,632],{"class":219},"+",[36,634,635],{"class":42},"xml,%3Csvg xmlns='http:\u002F\u002Fwww",[36,637,638],{"class":62},".w3",[36,640,641],{"class":42},".org\u002F2000\u002Fsvg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ccc'\u002F%3E%3C\u002Fsvg%3E\");\n",[36,643,644],{"class":38,"line":98},[36,645,647],{"emptyLinePlaceholder":646},true,"\n",[36,649,650],{"class":38,"line":141},[36,651,652],{"class":463},"\u002F* Base64-encoded (better for larger SVGs) *\u002F\n",[36,654,655,657,659,661,663,665,667,670,674],{"class":38,"line":151},[36,656,413],{"class":46},[36,658,621],{"class":42},[36,660,624],{"class":46},[36,662,627],{"class":42},[36,664,59],{"class":46},[36,666,632],{"class":219},[36,668,669],{"class":42},"xml;base64,PHN2Zy..",[36,671,673],{"class":672},"s7hpK",".\"",[36,675,206],{"class":42},[10,677,678],{},"URL-encoding preserves readability for small icons and avoids the 33% Base64 expansion. For larger SVGs, Base64 produces a more compact string because URL-encoding must escape many characters in XML markup.",[10,680,681,682,687],{},"To convert SVGs to either format quickly, the ",[683,684,686],"a",{"href":685},"\u002Ftools\u002Fimage-to-base64","Image to Base64 tool"," generates data URI strings from uploaded SVG, PNG, or JPEG files.",[689,690,691],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":31,"searchDepth":53,"depth":53,"links":693},[694,695,696,697,698],{"id":16,"depth":53,"text":17},{"id":290,"depth":53,"text":291},{"id":429,"depth":53,"text":430},{"id":534,"depth":53,"text":535},{"id":600,"depth":53,"text":601},"2026-05-28","When to inline SVG as data URI versus using inline SVG elements directly in HTML.","md",{},"\u002Fguides\u002Fbase64-svg-embedding",{"title":5,"description":700},"guides\u002Fbase64-svg-embedding","FyfCHJkxrJ0dwTwPurAGQX80dFqY8INRNX4ar0J_toE",1780401331655]