https://docs.builderius.io/assets/js/4e7c69df.ebb3d32e.js

1"use strict";(globalThis.webpackChunkbuilderius=globalThis.webpackChunkbuilderius||[]).push([[5157],{3685:(e,n,s)=>{s.d(n,{A:()=>t});const t=s.p+"assets/images/elements-22-539cc340977bfdf8609dd79c856df485.webp"},6488:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>c,default:()=>h,frontMatter:()=>o,metadata:()=>t,toc:()=>d});const t=JSON.parse('{"id":"elements/svg-code","title":"SVG Code","description":"The SVG Code element lets you add custom SVG graphics directly to your page without any wrapper elements. SVG Code element renders exactly the code you write, giving you complete control over the SVG output.","source":"@site/docs/elements/svg.md","sourceDirName":"elements","slug":"/elements/svg-code","permalink":"/docs/elements/svg-code","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"id":"svg-code","title":"SVG Code"},"sidebar":"docs","previous":{"title":"HTML Code","permalink":"/docs/elements/html-code"},"next":{"title":"Image","permalink":"/docs/elements/image"}}');var i=s(4848),r=s(8453);const o={id:"svg-code",title:"SVG Code"},c=void 0,l={},d=[{value:"SVG Code Editor Interface",id:"svg-code-editor-interface",level:2},{value:"Common Use Cases",id:"common-use-cases",level:2},{value:"Security Considerations",id:"security-considerations",level:2},{value:"Best Practices",id:"best-practices",level:2},{value:"Limitations",id:"limitations",level:2},{value:"When to Use SVG Code",id:"when-to-use-svg-code",level:2}];function a(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.p,{children:["The SVG Code element lets you add custom ",(0,i.jsx)(n.strong,{children:"SVG graphics"})," directly to your page ",(0,i.jsx)(n.strong,{children:"without any wrapper elements"}),". SVG Code element ",(0,i.jsx)(n.strong,{children:"renders exactly the code you write"}),", giving you complete control over the SVG output."]}),"\n",(0,i.jsx)(n.admonition,{title:"Non-Container Element",type:"info",children:(0,i.jsxs)(n.p,{children:["This is a ",(0,i.jsx)(n.strong,{children:"non-container element"})," - it doesn't wrap your content in additional HTML and has no styling controls. It renders only the code you provide. ",(0,i.jsx)(n.a,{href:"introduction/",children:"Learn more about element types \u2192"})]})}),"\n",(0,i.jsx)(n.h2,{id:"svg-code-editor-interface",children:"SVG Code Editor Interface"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Screenshot showing SVG Code element with code editor area and syntax highlighting for SVG",src:s(3685).A+"",width:"1350",height:"700"})}),"\n",(0,i.jsxs)(n.p,{children:["The SVG Code element provides a ",(0,i.jsx)(n.strong,{children:"simple code editor"})," where you can paste or write any valid SVG markup."]}),"\n",(0,i.jsx)(n.h2,{id:"common-use-cases",children:"Common Use Cases"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Custom icons:"})," Create unique icons that match your brand exactly:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-svg",children:'\x3c!-- Logo icon --\x3e\n<svg width="32" height="32" viewBox="0 0 32 32">\n  <circle cx="16" cy="16" r="12" fill="#007acc"/>\n  <text x="16" y="20" text-anchor="middle" fill="white" font-family="Arial" font-size="14">B</text>\n</svg>\n'})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Simple illustrations:"})," Add custom graphics that scale perfectly:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-svg",children:'\x3c!-- Simple illustration --\x3e\n<svg width="200" height="100" viewBox="0 0 200 100">\n  <rect x="20" y="60" width="160" height="30" fill="#8B5CF6" rx="4"/>\n  <circle cx="50" cy="40" r="15" fill="#F59E0B"/>\n  <circle cx="100" cy="30" r="20" fill="#EF4444"/>\n  <circle cx="150" cy="40" r="15" fill="#10B981"/>\n</svg>\n'})}),"\n",(0,i.jsx)(n.h2,{id:"security-considerations",children:"Security Considerations"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Validate external SVG:"})," Be cautious when copying SVG from external sources. Ensure the SVG doesn't contain malicious scripts or references."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Script prevention:"})," While rare, SVG can contain JavaScript. Only use SVG from sources you trust."]}),"\n",(0,i.jsx)(n.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Valid SVG:"})," Ensure your SVG is properly formatted and uses valid syntax to avoid rendering issues."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Optimize viewB

1ox:"})," Use appropriate viewBox dimensions for clean scaling across different sizes."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Use currentColor:"})," Let SVG inherit text color from parent elements for flexible theming."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Accessibility:"})," Include ",(0,i.jsx)(n.code,{children:"title"})," and ",(0,i.jsx)(n.code,{children:"alt"})," elements for screen readers when appropriate. When the SVG should be ignored by screen readers, use ",(0,i.jsx)(n.code,{children:'aria-hidden="true"'})," to make it invisible to screen readers."]}),"\n",(0,i.jsx)(n.h2,{id:"limitations",children:"Limitations"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"No styling controls:"})," The SVG Code element has no built-in styling options. But you can create selectors to target the SVG elements inside your code."]}),"\n",(0,i.jsx)(n.h2,{id:"when-to-use-svg-code",children:"When to Use SVG Code"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Use SVG Code when you need:"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["Custom ",(0,i.jsx)(n.strong,{children:"icons"})," or ",(0,i.jsx)(n.strong,{children:"illustrations"})]}),"\n",(0,i.jsxs)(n.li,{children:["Scalable ",(0,i.jsx)(n.strong,{children:"graphics"})," that stay crisp at any size"]}),"\n",(0,i.jsx)(n.li,{children:"Brand-specific visual elements"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Use other elements when you need:"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Visual styling options"}),"\n",(0,i.jsx)(n.li,{children:"Content management through the builder interface"}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Next steps:"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"./html-code",children:"Learn about HTML Code elements \u2192"})}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>c});var t=s(6540);const i={},r=t.createContext(i);function o(e){const n=t.useContext(r);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]);