[{"data":1,"prerenderedAt":1483},["ShallowReactive",2],{"guide-svg-placeholder-images-development":3},{"id":4,"title":5,"body":6,"date":1472,"description":1473,"extension":1474,"meta":1475,"navigation":571,"path":1479,"readingTime":289,"seo":1480,"stem":1481,"__hash__":1482},"guides\u002Fguides\u002Fsvg-placeholder-images-development.md","SVG Placeholder Images for Development: Lightweight, Scalable, Perfect",{"type":7,"value":8,"toc":1458},"minimark",[9,14,18,21,99,102,106,109,317,320,324,335,391,396,614,618,621,1000,1004,1011,1141,1152,1233,1237,1243,1344,1353,1357,1360,1391,1395,1421,1425,1434,1438,1454],[10,11,13],"h2",{"id":12},"why-svg-for-placeholder-images","Why SVG for Placeholder Images?",[15,16,17],"p",{},"During development, you need images that load fast, scale perfectly, and communicate layout intent. Raster placeholder services (like Lorem Picsum) download actual JPEG\u002FPNG files — real HTTP requests, real kilobytes, and real latency on slow connections.",[15,19,20],{},"SVG placeholder images solve all three problems:",[22,23,24,40],"table",{},[25,26,27],"thead",{},[28,29,30,34,37],"tr",{},[31,32,33],"th",{},"Property",[31,35,36],{},"Raster Placeholder",[31,38,39],{},"SVG Placeholder",[41,42,43,55,66,77,88],"tbody",{},[28,44,45,49,52],{},[46,47,48],"td",{},"File size",[46,50,51],{},"5–50 KB per image",[46,53,54],{},"0.2–2 KB per image",[28,56,57,60,63],{},[46,58,59],{},"Scaling",[46,61,62],{},"Pixelates at high DPI",[46,64,65],{},"Crisp at any resolution",[28,67,68,71,74],{},[46,69,70],{},"HTTP request",[46,72,73],{},"Required (external service)",[46,75,76],{},"Optional (inline or data URI)",[28,78,79,82,85],{},[46,80,81],{},"Customization",[46,83,84],{},"Limited (size, blur)",[46,86,87],{},"Full control (text, color, shape)",[28,89,90,93,96],{},[46,91,92],{},"Offline",[46,94,95],{},"Fails without network",[46,97,98],{},"Works offline if inlined",[15,100,101],{},"For local development, SVG placeholders eliminate external dependencies entirely.",[10,103,105],{"id":104},"inline-svg-placeholders","Inline SVG Placeholders",[15,107,108],{},"The simplest approach drops an SVG directly into your HTML:",[110,111,116],"pre",{"className":112,"code":113,"language":114,"meta":115,"style":115},"language-html shiki shiki-themes github-light github-dark","\u003Cdiv class=\"image-slot\">\n  \u003Csvg width=\"800\" height=\"600\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n    \u003Crect width=\"100%\" height=\"100%\" fill=\"#E2E8F0\"\u002F>\n    \u003Ctext x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\"\n          font-family=\"sans-serif\" font-size=\"24\" fill=\"#94A3B8\">\n      800 × 600\n    \u003C\u002Ftext>\n  \u003C\u002Fsvg>\n\u003C\u002Fdiv>\n","html","",[117,118,119,146,181,214,253,281,287,297,307],"code",{"__ignoreMap":115},[120,121,124,128,132,136,139,143],"span",{"class":122,"line":123},"line",1,[120,125,127],{"class":126},"sVt8B","\u003C",[120,129,131],{"class":130},"s9eBZ","div",[120,133,135],{"class":134},"sScJk"," class",[120,137,138],{"class":126},"=",[120,140,142],{"class":141},"sZZnC","\"image-slot\"",[120,144,145],{"class":126},">\n",[120,147,149,152,155,158,160,163,166,168,171,174,176,179],{"class":122,"line":148},2,[120,150,151],{"class":126},"  \u003C",[120,153,154],{"class":130},"svg",[120,156,157],{"class":134}," width",[120,159,138],{"class":126},[120,161,162],{"class":141},"\"800\"",[120,164,165],{"class":134}," height",[120,167,138],{"class":126},[120,169,170],{"class":141},"\"600\"",[120,172,173],{"class":134}," xmlns",[120,175,138],{"class":126},[120,177,178],{"class":141},"\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\"",[120,180,145],{"class":126},[120,182,184,187,190,192,194,197,199,201,203,206,208,211],{"class":122,"line":183},3,[120,185,186],{"class":126},"    \u003C",[120,188,189],{"class":130},"rect",[120,191,157],{"class":134},[120,193,138],{"class":126},[120,195,196],{"class":141},"\"100%\"",[120,198,165],{"class":134},[120,200,138],{"class":126},[120,202,196],{"class":141},[120,204,205],{"class":134}," fill",[120,207,138],{"class":126},[120,209,210],{"class":141},"\"#E2E8F0\"",[120,212,213],{"class":126},"\u002F>\n",[120,215,217,219,222,225,227,230,233,235,237,240,242,245,248,250],{"class":122,"line":216},4,[120,218,186],{"class":126},[120,220,221],{"class":130},"text",[120,223,224],{"class":134}," x",[120,226,138],{"class":126},[120,228,229],{"class":141},"\"50%\"",[120,231,232],{"class":134}," y",[120,234,138],{"class":126},[120,236,229],{"class":141},[120,238,239],{"class":134}," dominant-baseline",[120,241,138],{"class":126},[120,243,244],{"class":141},"\"middle\"",[120,246,247],{"class":134}," text-anchor",[120,249,138],{"class":126},[120,251,252],{"class":141},"\"middle\"\n",[120,254,256,259,261,264,267,269,272,274,276,279],{"class":122,"line":255},5,[120,257,258],{"class":134},"          font-family",[120,260,138],{"class":126},[120,262,263],{"class":141},"\"sans-serif\"",[120,265,266],{"class":134}," font-size",[120,268,138],{"class":126},[120,270,271],{"class":141},"\"24\"",[120,273,205],{"class":134},[120,275,138],{"class":126},[120,277,278],{"class":141},"\"#94A3B8\"",[120,280,145],{"class":126},[120,282,284],{"class":122,"line":283},6,[120,285,286],{"class":126},"      800 × 600\n",[120,288,290,293,295],{"class":122,"line":289},7,[120,291,292],{"class":126},"    \u003C\u002F",[120,294,221],{"class":130},[120,296,145],{"class":126},[120,298,300,303,305],{"class":122,"line":299},8,[120,301,302],{"class":126},"  \u003C\u002F",[120,304,154],{"class":130},[120,306,145],{"class":126},[120,308,310,313,315],{"class":122,"line":309},9,[120,311,312],{"class":126},"\u003C\u002F",[120,314,131],{"class":130},[120,316,145],{"class":126},[15,318,319],{},"This renders instantly, scales perfectly, and clearly communicates the intended dimensions.",[10,321,323],{"id":322},"data-uri-svg-placeholders","Data URI SVG Placeholders",[15,325,326,327,330,331,334],{},"For ",[117,328,329],{},"\u003Cimg>"," tags that require a ",[117,332,333],{},"src"," attribute, encode the SVG as a data URI:",[110,336,338],{"className":112,"code":337,"language":114,"meta":115,"style":115},"\u003Cimg\n  src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='800' height='600'%3E%3Crect width='100%25' height='100%25' fill='%23E2E8F0'\u002F%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='sans-serif' font-size='24' fill='%2394A3B8'%3E800 × 600%3C\u002Ftext%3E%3C\u002Fsvg%3E\"\n  alt=\"Placeholder image 800x600\"\n  width=\"800\"\n  height=\"600\"\n\u002F>\n",[117,339,340,347,357,367,377,387],{"__ignoreMap":115},[120,341,342,344],{"class":122,"line":123},[120,343,127],{"class":126},[120,345,346],{"class":130},"img\n",[120,348,349,352,354],{"class":122,"line":148},[120,350,351],{"class":134},"  src",[120,353,138],{"class":126},[120,355,356],{"class":141},"\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='800' height='600'%3E%3Crect width='100%25' height='100%25' fill='%23E2E8F0'\u002F%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='sans-serif' font-size='24' fill='%2394A3B8'%3E800 × 600%3C\u002Ftext%3E%3C\u002Fsvg%3E\"\n",[120,358,359,362,364],{"class":122,"line":183},[120,360,361],{"class":134},"  alt",[120,363,138],{"class":126},[120,365,366],{"class":141},"\"Placeholder image 800x600\"\n",[120,368,369,372,374],{"class":122,"line":216},[120,370,371],{"class":134},"  width",[120,373,138],{"class":126},[120,375,376],{"class":141},"\"800\"\n",[120,378,379,382,384],{"class":122,"line":255},[120,380,381],{"class":134},"  height",[120,383,138],{"class":126},[120,385,386],{"class":141},"\"600\"\n",[120,388,389],{"class":122,"line":283},[120,390,213],{"class":126},[392,393,395],"h3",{"id":394},"generating-data-uris-programmatically","Generating Data URIs Programmatically",[110,397,401],{"className":398,"code":399,"language":400,"meta":115,"style":115},"language-javascript shiki shiki-themes github-light github-dark","function svgPlaceholder(width, height, text, bgColor = '#E2E8F0', textColor = '#94A3B8') {\n  const svg = `\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"${width}\" height=\"${height}\">\n    \u003Crect width=\"100%\" height=\"100%\" fill=\"${bgColor}\"\u002F>\n    \u003Ctext x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\"\n          font-family=\"sans-serif\" font-size=\"20\" fill=\"${textColor}\">\n      ${text || `${width} × ${height}`}\n    \u003C\u002Ftext>\n  \u003C\u002Fsvg>`;\n  return `data:image\u002Fsvg+xml,${encodeURIComponent(svg)}`;\n}\n\n\u002F\u002F Usage\ndocument.querySelector('img').src = svgPlaceholder(800, 600);\n","javascript",[117,402,403,453,477,487,492,501,524,529,537,560,566,573,580],{"__ignoreMap":115},[120,404,405,409,412,415,419,422,425,427,429,431,434,437,440,442,445,447,450],{"class":122,"line":123},[120,406,408],{"class":407},"szBVR","function",[120,410,411],{"class":134}," svgPlaceholder",[120,413,414],{"class":126},"(",[120,416,418],{"class":417},"s4XuR","width",[120,420,421],{"class":126},", ",[120,423,424],{"class":417},"height",[120,426,421],{"class":126},[120,428,221],{"class":417},[120,430,421],{"class":126},[120,432,433],{"class":417},"bgColor",[120,435,436],{"class":407}," =",[120,438,439],{"class":141}," '#E2E8F0'",[120,441,421],{"class":126},[120,443,444],{"class":417},"textColor",[120,446,436],{"class":407},[120,448,449],{"class":141}," '#94A3B8'",[120,451,452],{"class":126},") {\n",[120,454,455,458,462,464,467,469,472,474],{"class":122,"line":148},[120,456,457],{"class":407},"  const",[120,459,461],{"class":460},"sj4cs"," svg",[120,463,436],{"class":407},[120,465,466],{"class":141}," `\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"${",[120,468,418],{"class":126},[120,470,471],{"class":141},"}\" height=\"${",[120,473,424],{"class":126},[120,475,476],{"class":141},"}\">\n",[120,478,479,482,484],{"class":122,"line":183},[120,480,481],{"class":141},"    \u003Crect width=\"100%\" height=\"100%\" fill=\"${",[120,483,433],{"class":126},[120,485,486],{"class":141},"}\"\u002F>\n",[120,488,489],{"class":122,"line":216},[120,490,491],{"class":141},"    \u003Ctext x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\"\n",[120,493,494,497,499],{"class":122,"line":255},[120,495,496],{"class":141},"          font-family=\"sans-serif\" font-size=\"20\" fill=\"${",[120,498,444],{"class":126},[120,500,476],{"class":141},[120,502,503,506,508,511,514,516,519,521],{"class":122,"line":283},[120,504,505],{"class":141},"      ${",[120,507,221],{"class":126},[120,509,510],{"class":407}," ||",[120,512,513],{"class":141}," `${",[120,515,418],{"class":126},[120,517,518],{"class":141},"} × ${",[120,520,424],{"class":126},[120,522,523],{"class":141},"}`}\n",[120,525,526],{"class":122,"line":289},[120,527,528],{"class":141},"    \u003C\u002Ftext>\n",[120,530,531,534],{"class":122,"line":299},[120,532,533],{"class":141},"  \u003C\u002Fsvg>`",[120,535,536],{"class":126},";\n",[120,538,539,542,545,548,550,552,555,558],{"class":122,"line":309},[120,540,541],{"class":407},"  return",[120,543,544],{"class":141}," `data:image\u002Fsvg+xml,${",[120,546,547],{"class":134},"encodeURIComponent",[120,549,414],{"class":141},[120,551,154],{"class":126},[120,553,554],{"class":141},")",[120,556,557],{"class":141},"}`",[120,559,536],{"class":126},[120,561,563],{"class":122,"line":562},10,[120,564,565],{"class":126},"}\n",[120,567,569],{"class":122,"line":568},11,[120,570,572],{"emptyLinePlaceholder":571},true,"\n",[120,574,576],{"class":122,"line":575},12,[120,577,579],{"class":578},"sJ8bj","\u002F\u002F Usage\n",[120,581,583,586,589,591,594,597,599,601,603,606,608,611],{"class":122,"line":582},13,[120,584,585],{"class":126},"document.",[120,587,588],{"class":134},"querySelector",[120,590,414],{"class":126},[120,592,593],{"class":141},"'img'",[120,595,596],{"class":126},").src ",[120,598,138],{"class":407},[120,600,411],{"class":134},[120,602,414],{"class":126},[120,604,605],{"class":460},"800",[120,607,421],{"class":126},[120,609,610],{"class":460},"600",[120,612,613],{"class":126},");\n",[10,615,617],{"id":616},"vuenuxt-component","Vue\u002FNuxt Component",[15,619,620],{},"For Nuxt projects, create a reusable placeholder component:",[110,622,626],{"className":623,"code":624,"language":625,"meta":115,"style":115},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\nconst props = withDefaults(defineProps\u003C{\n  width: number\n  height: number\n  text?: string\n  bgColor?: string\n  textColor?: string\n}>(), {\n  text: '',\n  bgColor: '#E2E8F0',\n  textColor: '#94A3B8',\n})\n\nconst label = computed(() => props.text || `${props.width} × ${props.height}`)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csvg :width=\"width\" :height=\"height\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" role=\"img\" :aria-label=\"`Placeholder: ${label}`\">\n    \u003Crect width=\"100%\" height=\"100%\" :fill=\"bgColor\" \u002F>\n    \u003Ctext x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\"\n          font-family=\"sans-serif\" :font-size=\"Math.min(width, height) \u002F 12\" :fill=\"textColor\">\n      {{ label }}\n    \u003C\u002Ftext>\n  \u003C\u002Fsvg>\n\u003C\u002Ftemplate>\n","vue",[117,627,628,648,669,679,687,698,707,716,721,732,742,752,757,761,809,818,823,833,880,910,941,967,973,982,991],{"__ignoreMap":115},[120,629,630,632,635,638,641,643,646],{"class":122,"line":123},[120,631,127],{"class":126},[120,633,634],{"class":130},"script",[120,636,637],{"class":134}," setup",[120,639,640],{"class":134}," lang",[120,642,138],{"class":126},[120,644,645],{"class":141},"\"ts\"",[120,647,145],{"class":126},[120,649,650,653,656,658,661,663,666],{"class":122,"line":148},[120,651,652],{"class":407},"const",[120,654,655],{"class":460}," props",[120,657,436],{"class":407},[120,659,660],{"class":134}," withDefaults",[120,662,414],{"class":126},[120,664,665],{"class":134},"defineProps",[120,667,668],{"class":126},"\u003C{\n",[120,670,671,673,676],{"class":122,"line":183},[120,672,371],{"class":417},[120,674,675],{"class":407},":",[120,677,678],{"class":460}," number\n",[120,680,681,683,685],{"class":122,"line":216},[120,682,381],{"class":417},[120,684,675],{"class":407},[120,686,678],{"class":460},[120,688,689,692,695],{"class":122,"line":255},[120,690,691],{"class":417},"  text",[120,693,694],{"class":407},"?:",[120,696,697],{"class":460}," string\n",[120,699,700,703,705],{"class":122,"line":283},[120,701,702],{"class":417},"  bgColor",[120,704,694],{"class":407},[120,706,697],{"class":460},[120,708,709,712,714],{"class":122,"line":289},[120,710,711],{"class":417},"  textColor",[120,713,694],{"class":407},[120,715,697],{"class":460},[120,717,718],{"class":122,"line":299},[120,719,720],{"class":126},"}>(), {\n",[120,722,723,726,729],{"class":122,"line":309},[120,724,725],{"class":126},"  text: ",[120,727,728],{"class":141},"''",[120,730,731],{"class":126},",\n",[120,733,734,737,740],{"class":122,"line":562},[120,735,736],{"class":126},"  bgColor: ",[120,738,739],{"class":141},"'#E2E8F0'",[120,741,731],{"class":126},[120,743,744,747,750],{"class":122,"line":568},[120,745,746],{"class":126},"  textColor: ",[120,748,749],{"class":141},"'#94A3B8'",[120,751,731],{"class":126},[120,753,754],{"class":122,"line":575},[120,755,756],{"class":126},"})\n",[120,758,759],{"class":122,"line":582},[120,760,572],{"emptyLinePlaceholder":571},[120,762,764,766,769,771,774,777,780,783,786,788,791,794,796,798,800,802,804,806],{"class":122,"line":763},14,[120,765,652],{"class":407},[120,767,768],{"class":460}," label",[120,770,436],{"class":407},[120,772,773],{"class":134}," computed",[120,775,776],{"class":126},"(() ",[120,778,779],{"class":407},"=>",[120,781,782],{"class":126}," props.text ",[120,784,785],{"class":407},"||",[120,787,513],{"class":141},[120,789,790],{"class":126},"props",[120,792,793],{"class":141},".",[120,795,418],{"class":126},[120,797,518],{"class":141},[120,799,790],{"class":126},[120,801,793],{"class":141},[120,803,424],{"class":126},[120,805,557],{"class":141},[120,807,808],{"class":126},")\n",[120,810,812,814,816],{"class":122,"line":811},15,[120,813,312],{"class":126},[120,815,634],{"class":130},[120,817,145],{"class":126},[120,819,821],{"class":122,"line":820},16,[120,822,572],{"emptyLinePlaceholder":571},[120,824,826,828,831],{"class":122,"line":825},17,[120,827,127],{"class":126},[120,829,830],{"class":130},"template",[120,832,145],{"class":126},[120,834,836,838,840,843,845,848,851,853,856,858,860,862,865,867,870,873,875,878],{"class":122,"line":835},18,[120,837,151],{"class":126},[120,839,154],{"class":130},[120,841,842],{"class":134}," :width",[120,844,138],{"class":126},[120,846,847],{"class":141},"\"width\"",[120,849,850],{"class":134}," :height",[120,852,138],{"class":126},[120,854,855],{"class":141},"\"height\"",[120,857,173],{"class":134},[120,859,138],{"class":126},[120,861,178],{"class":141},[120,863,864],{"class":134}," role",[120,866,138],{"class":126},[120,868,869],{"class":141},"\"img\"",[120,871,872],{"class":134}," :aria-label",[120,874,138],{"class":126},[120,876,877],{"class":141},"\"`Placeholder: ${label}`\"",[120,879,145],{"class":126},[120,881,883,885,887,889,891,893,895,897,899,902,904,907],{"class":122,"line":882},19,[120,884,186],{"class":126},[120,886,189],{"class":130},[120,888,157],{"class":134},[120,890,138],{"class":126},[120,892,196],{"class":141},[120,894,165],{"class":134},[120,896,138],{"class":126},[120,898,196],{"class":141},[120,900,901],{"class":134}," :fill",[120,903,138],{"class":126},[120,905,906],{"class":141},"\"bgColor\"",[120,908,909],{"class":126}," \u002F>\n",[120,911,913,915,917,919,921,923,925,927,929,931,933,935,937,939],{"class":122,"line":912},20,[120,914,186],{"class":126},[120,916,221],{"class":130},[120,918,224],{"class":134},[120,920,138],{"class":126},[120,922,229],{"class":141},[120,924,232],{"class":134},[120,926,138],{"class":126},[120,928,229],{"class":141},[120,930,239],{"class":134},[120,932,138],{"class":126},[120,934,244],{"class":141},[120,936,247],{"class":134},[120,938,138],{"class":126},[120,940,252],{"class":141},[120,942,944,946,948,950,953,955,958,960,962,965],{"class":122,"line":943},21,[120,945,258],{"class":134},[120,947,138],{"class":126},[120,949,263],{"class":141},[120,951,952],{"class":134}," :font-size",[120,954,138],{"class":126},[120,956,957],{"class":141},"\"Math.min(width, height) \u002F 12\"",[120,959,901],{"class":134},[120,961,138],{"class":126},[120,963,964],{"class":141},"\"textColor\"",[120,966,145],{"class":126},[120,968,970],{"class":122,"line":969},22,[120,971,972],{"class":126},"      {{ label }}\n",[120,974,976,978,980],{"class":122,"line":975},23,[120,977,292],{"class":126},[120,979,221],{"class":130},[120,981,145],{"class":126},[120,983,985,987,989],{"class":122,"line":984},24,[120,986,302],{"class":126},[120,988,154],{"class":130},[120,990,145],{"class":126},[120,992,994,996,998],{"class":122,"line":993},25,[120,995,312],{"class":126},[120,997,830],{"class":130},[120,999,145],{"class":126},[10,1001,1003],{"id":1002},"responsive-placeholder-patterns","Responsive Placeholder Patterns",[15,1005,1006,1007,1010],{},"Fixed-dimension placeholders break in responsive layouts because they do not adapt to container width. Use ",[117,1008,1009],{},"viewBox"," instead of fixed width\u002Fheight:",[110,1012,1014],{"className":112,"code":1013,"language":114,"meta":115,"style":115},"\u003Csvg viewBox=\"0 0 16 9\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" style=\"width: 100%; height: auto;\">\n  \u003Crect width=\"100%\" height=\"100%\" fill=\"#E2E8F0\"\u002F>\n  \u003Ctext x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\"\n        font-size=\"1\" fill=\"#94A3B8\">\n    16:9\n  \u003C\u002Ftext>\n\u003C\u002Fsvg>\n",[117,1015,1016,1046,1072,1102,1120,1125,1133],{"__ignoreMap":115},[120,1017,1018,1020,1022,1025,1027,1030,1032,1034,1036,1039,1041,1044],{"class":122,"line":123},[120,1019,127],{"class":126},[120,1021,154],{"class":130},[120,1023,1024],{"class":134}," viewBox",[120,1026,138],{"class":126},[120,1028,1029],{"class":141},"\"0 0 16 9\"",[120,1031,173],{"class":134},[120,1033,138],{"class":126},[120,1035,178],{"class":141},[120,1037,1038],{"class":134}," style",[120,1040,138],{"class":126},[120,1042,1043],{"class":141},"\"width: 100%; height: auto;\"",[120,1045,145],{"class":126},[120,1047,1048,1050,1052,1054,1056,1058,1060,1062,1064,1066,1068,1070],{"class":122,"line":148},[120,1049,151],{"class":126},[120,1051,189],{"class":130},[120,1053,157],{"class":134},[120,1055,138],{"class":126},[120,1057,196],{"class":141},[120,1059,165],{"class":134},[120,1061,138],{"class":126},[120,1063,196],{"class":141},[120,1065,205],{"class":134},[120,1067,138],{"class":126},[120,1069,210],{"class":141},[120,1071,213],{"class":126},[120,1073,1074,1076,1078,1080,1082,1084,1086,1088,1090,1092,1094,1096,1098,1100],{"class":122,"line":183},[120,1075,151],{"class":126},[120,1077,221],{"class":130},[120,1079,224],{"class":134},[120,1081,138],{"class":126},[120,1083,229],{"class":141},[120,1085,232],{"class":134},[120,1087,138],{"class":126},[120,1089,229],{"class":141},[120,1091,239],{"class":134},[120,1093,138],{"class":126},[120,1095,244],{"class":141},[120,1097,247],{"class":134},[120,1099,138],{"class":126},[120,1101,252],{"class":141},[120,1103,1104,1107,1109,1112,1114,1116,1118],{"class":122,"line":216},[120,1105,1106],{"class":134},"        font-size",[120,1108,138],{"class":126},[120,1110,1111],{"class":141},"\"1\"",[120,1113,205],{"class":134},[120,1115,138],{"class":126},[120,1117,278],{"class":141},[120,1119,145],{"class":126},[120,1121,1122],{"class":122,"line":255},[120,1123,1124],{"class":126},"    16:9\n",[120,1126,1127,1129,1131],{"class":122,"line":283},[120,1128,302],{"class":126},[120,1130,221],{"class":130},[120,1132,145],{"class":126},[120,1134,1135,1137,1139],{"class":122,"line":289},[120,1136,312],{"class":126},[120,1138,154],{"class":130},[120,1140,145],{"class":126},[15,1142,1143,1144,1147,1148,1151],{},"The ",[117,1145,1146],{},"viewBox=\"0 0 16 9\""," defines the aspect ratio. The ",[117,1149,1150],{},"width: 100%"," CSS stretches the SVG to fill the container while maintaining proportions. Common aspect ratios:",[22,1153,1154,1166],{},[25,1155,1156],{},[28,1157,1158,1161,1163],{},[31,1159,1160],{},"Ratio",[31,1162,1009],{},[31,1164,1165],{},"Use Case",[41,1167,1168,1181,1194,1207,1220],{},[28,1169,1170,1173,1178],{},[46,1171,1172],{},"16:9",[46,1174,1175],{},[117,1176,1177],{},"0 0 16 9",[46,1179,1180],{},"Hero images, video thumbnails",[28,1182,1183,1186,1191],{},[46,1184,1185],{},"4:3",[46,1187,1188],{},[117,1189,1190],{},"0 0 4 3",[46,1192,1193],{},"Traditional photos",[28,1195,1196,1199,1204],{},[46,1197,1198],{},"1:1",[46,1200,1201],{},[117,1202,1203],{},"0 0 1 1",[46,1205,1206],{},"Profile avatars, product shots",[28,1208,1209,1212,1217],{},[46,1210,1211],{},"3:2",[46,1213,1214],{},[117,1215,1216],{},"0 0 3 2",[46,1218,1219],{},"DSLR-style photos",[28,1221,1222,1225,1230],{},[46,1223,1224],{},"21:9",[46,1226,1227],{},[117,1228,1229],{},"0 0 21 9",[46,1231,1232],{},"Cinematic banners",[10,1234,1236],{"id":1235},"dark-mode-support","Dark Mode Support",[15,1238,1239,1240,675],{},"SVG placeholders can adapt to the user's color preference using CSS ",[117,1241,1242],{},"prefers-color-scheme",[110,1244,1248],{"className":1245,"code":1246,"language":1247,"meta":115,"style":115},"language-css shiki shiki-themes github-light github-dark",".placeholder-svg rect {\n  fill: #E2E8F0;\n}\n\n@media (prefers-color-scheme: dark) {\n  .placeholder-svg rect {\n    fill: #1E293B;\n  }\n  .placeholder-svg text {\n    fill: #64748B;\n  }\n}\n","css",[117,1249,1250,1261,1274,1278,1282,1290,1299,1311,1316,1325,1336,1340],{"__ignoreMap":115},[120,1251,1252,1255,1258],{"class":122,"line":123},[120,1253,1254],{"class":134},".placeholder-svg",[120,1256,1257],{"class":130}," rect",[120,1259,1260],{"class":126}," {\n",[120,1262,1263,1266,1269,1272],{"class":122,"line":148},[120,1264,1265],{"class":460},"  fill",[120,1267,1268],{"class":126},": ",[120,1270,1271],{"class":460},"#E2E8F0",[120,1273,536],{"class":126},[120,1275,1276],{"class":122,"line":183},[120,1277,565],{"class":126},[120,1279,1280],{"class":122,"line":216},[120,1281,572],{"emptyLinePlaceholder":571},[120,1283,1284,1287],{"class":122,"line":255},[120,1285,1286],{"class":407},"@media",[120,1288,1289],{"class":126}," (prefers-color-scheme: dark) {\n",[120,1291,1292,1295,1297],{"class":122,"line":283},[120,1293,1294],{"class":134},"  .placeholder-svg",[120,1296,1257],{"class":130},[120,1298,1260],{"class":126},[120,1300,1301,1304,1306,1309],{"class":122,"line":289},[120,1302,1303],{"class":460},"    fill",[120,1305,1268],{"class":126},[120,1307,1308],{"class":460},"#1E293B",[120,1310,536],{"class":126},[120,1312,1313],{"class":122,"line":299},[120,1314,1315],{"class":126},"  }\n",[120,1317,1318,1320,1323],{"class":122,"line":309},[120,1319,1294],{"class":134},[120,1321,1322],{"class":130}," text",[120,1324,1260],{"class":126},[120,1326,1327,1329,1331,1334],{"class":122,"line":562},[120,1328,1303],{"class":460},[120,1330,1268],{"class":126},[120,1332,1333],{"class":460},"#64748B",[120,1335,536],{"class":126},[120,1337,1338],{"class":122,"line":568},[120,1339,1315],{"class":126},[120,1341,1342],{"class":122,"line":575},[120,1343,565],{"class":126},[15,1345,1346,1347,1349,1350,1352],{},"This works with inline SVG but not with data URIs in ",[117,1348,329],{}," tags (CSS cannot target inside an ",[117,1351,329],{},").",[10,1354,1356],{"id":1355},"when-to-switch-to-real-images","When to Switch to Real Images",[15,1358,1359],{},"SVG placeholders are for development and prototyping. Replace them with real images before production:",[1361,1362,1363,1371,1381],"ol",{},[1364,1365,1366,1370],"li",{},[1367,1368,1369],"strong",{},"Content CMS",": If images come from a CMS, the CMS URL replaces the SVG data URI naturally.",[1364,1372,1373,1376,1377,1380],{},[1367,1374,1375],{},"Lazy loading",": Add ",[117,1378,1379],{},"loading=\"lazy\""," to production images for performance.",[1364,1382,1383,1386,1387,1390],{},[1367,1384,1385],{},"Blurred placeholder",": Use a tiny, blurred version of the real image as a ",[117,1388,1389],{},"background-image"," while the full image loads — LQIP (Low Quality Image Placeholder) technique.",[10,1392,1394],{"id":1393},"key-takeaways","Key Takeaways",[1396,1397,1398,1401,1407,1413,1418],"ul",{},[1364,1399,1400],{},"SVG placeholders load instantly, scale perfectly, and work offline — ideal for development",[1364,1402,1403,1404,1406],{},"Inline SVG gives CSS control; data URIs work in ",[117,1405,329],{}," tags",[1364,1408,1409,1410,1412],{},"Use ",[117,1411,1009],{}," for responsive placeholders that maintain aspect ratio",[1364,1414,1415,1416,554],{},"Dark mode support requires inline SVG (CSS cannot target inside ",[117,1417,329],{},[1364,1419,1420],{},"Replace SVG placeholders with real images or LQIP patterns before production",[10,1422,1424],{"id":1423},"try-it-yourself","Try It Yourself",[15,1426,1427,1428,1433],{},"Generate placeholder images with custom sizes, colors, and text using our ",[1429,1430,1432],"a",{"href":1431},"\u002Ftools\u002Fplaceholder-image","Placeholder Image Generator",". Supports both raster and SVG output formats.",[10,1435,1437],{"id":1436},"related-guides","Related Guides",[1396,1439,1440,1447],{},[1364,1441,1442,1446],{},[1429,1443,1445],{"href":1444},"\u002Fguides\u002Fplaceholder-image-guide","Placeholder Image Guide"," — when and how to use dummy images",[1364,1448,1449,1453],{},[1429,1450,1452],{"href":1451},"\u002Fguides\u002Fmockup-image-best-practices","Mockup Image Best Practices"," — choosing the right placeholder for your design workflow",[1455,1456,1457],"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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":115,"searchDepth":148,"depth":148,"links":1459},[1460,1461,1462,1465,1466,1467,1468,1469,1470,1471],{"id":12,"depth":148,"text":13},{"id":104,"depth":148,"text":105},{"id":322,"depth":148,"text":323,"children":1463},[1464],{"id":394,"depth":183,"text":395},{"id":616,"depth":148,"text":617},{"id":1002,"depth":148,"text":1003},{"id":1235,"depth":148,"text":1236},{"id":1355,"depth":148,"text":1356},{"id":1393,"depth":148,"text":1394},{"id":1423,"depth":148,"text":1424},{"id":1436,"depth":148,"text":1437},"2026-05-28","Learn why SVG placeholder images outperform raster alternatives during development. Covers inline SVG, data URIs, and responsive placeholder patterns.","md",{"keywords":1476,"immutable":571},[1477,1478],"placeholder-image","svg-placeholder-images-development","\u002Fguides\u002Fsvg-placeholder-images-development",{"title":5,"description":1473},"guides\u002Fsvg-placeholder-images-development","D8OOXtGqJob9yBSyaLCHFORWiM3h7U0cSk8POxkIZvI",1780401337271]