[{"data":1,"prerenderedAt":73},["ShallowReactive",2],{"tool-content-en-svg-badge":3},{"id":4,"title":5,"body":6,"description":63,"extension":64,"locale":65,"meta":66,"navigation":67,"path":68,"seo":69,"stem":70,"toolId":71,"__hash__":72},"tools\u002Ftools\u002Fen\u002Fsvg-badge.md","SVG Badge & Placeholder",{"type":7,"value":8,"toc":55},"minimark",[9,14,18,22,30,41,45,48,52],[10,11,13],"h2",{"id":12},"what-is-this-tool","What is this tool?",[15,16,17],"p",{},"Small status badges and placeholder images show up everywhere in README files, dashboards, and mock-ups. This tool draws them locally in your browser so you can style and export them without uploading anything.",[10,19,21],{"id":20},"badge","Badge",[15,23,24,25,29],{},"Type a label and a value, pick two colors, and get a Shields-style badge instantly. Choose flat corners for a sharper look. Copy the SVG source, download the ",[26,27,28],"code",{},".svg",", or rasterize it to a PNG.",[15,31,32,33,36,37,40],{},"Colors are hex values such as ",[26,34,35],{},"#555555"," or ",[26,38,39],{},"#4c1",". Badges are built as crisp vector SVG, so they stay sharp at any size.",[10,42,44],{"id":43},"placeholder","Placeholder",[15,46,47],{},"Generate an image with a custom size, background color, text, and text color for mock-ups and wireframes. The preview renders on a canvas; download it as PNG or copy its data URL.",[10,49,51],{"id":50},"privacy","Privacy",[15,53,54],{},"Everything is generated locally. Badges and placeholders never leave your browser.",{"title":56,"searchDepth":57,"depth":57,"links":58},"",2,[59,60,61,62],{"id":12,"depth":57,"text":13},{"id":20,"depth":57,"text":21},{"id":43,"depth":57,"text":44},{"id":50,"depth":57,"text":51},"Create Shields-style SVG badges or placeholder images locally and export them as SVG or PNG.","md","en",{},true,"\u002Ftools\u002Fen\u002Fsvg-badge",{"title":5,"description":63},"tools\u002Fen\u002Fsvg-badge","svg-badge","A3qwn1G7vYH5S44lNyXQrzzTayIM_gtxSee7tZfzXIU",1792391420832]