{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"inline-svg-tag","__idx":0},"children":["Inline SVG Tag ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/learn/markdoc/tags/tag-library#redocly-tag-badge"},"children":[{"$$mdtype":"Tag","name":"TagBadge","attributes":{"badgeType":"Redocly"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The inline SVG tag is used to render and style an SVG image in your document."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"syntax-and-usage","__idx":1},"children":["Syntax and usage"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["inline-svg"]}," tag requires a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["file"]}," attribute, which provides a file path to an SVG file."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example embeds a Redocly logo from an svg file:"]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"InlineSvg","attributes":{"file":"./images/redocly-logo.svg"},"children":[]}],"rawContent":"{% inline-svg file=\"./images/redocly-logo.svg\" /%}\n"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Before the SVG renders on the document, it's optimized using ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://github.com/svg/svgo"},"children":["SVGO"]},". The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id"]}," attribute is also prefixed with the relative file path to avoid conflicts."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"styling-the-svg","__idx":2},"children":["Styling the SVG"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["SVGs can be styled using CSS rules added to your project, but you need a way to reference the SVG. There's two ways to add an identifier to the SVG:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Modify the HTML in the SVG file and add a class."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Apply a CSS class directly to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["inline-svg"]}," tag, as in the following example:"]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"InlineSvg","attributes":{"class":"some-custom-class","file":"./images/redocly-logo.svg"},"children":[]}],"rawContent":"{% inline-svg file=\"./images/redocly-logo.svg\" .some-custom-class /%}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The second approach provides more flexibility to writers using the Markdoc tag."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"attributes","__idx":3},"children":["Attributes"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Attribute"},"children":["Attribute"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["file"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Absolute or relative path to the svg file."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":4},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"render-svg-from-file","__idx":5},"children":["Render SVG from file"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example adds an inline SVG to your document:"]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"InlineSvg","attributes":{"file":"./images/ramen-icon.svg"},"children":[]}],"rawContent":"{% inline-svg file=\"./images/ramen-icon.svg\" /%}\n"},"children":[]},{"$$mdtype":"Tag","name":"InlineSvg","attributes":{"file":"./images/ramen-icon.svg","fileRawContent":"<?xml version=\"1.0\" encoding=\"UTF-8\"?><svg width=\"512pt\" height=\"512pt\" version=\"1.1\" viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m491.36 265.12h-28.422c0.82031-4.5586 1.3398-9.2188 1.3398-13.98 0-41.68-33.738-105.88-78.539-105.88-16.582 0-31.641 8.8008-44.039 21.961-1.3398-1.6406-2.9219-3.1797-4.8594-4.3008-6.1992-3.5781-13.102-2.3594-19.199-1.2812-3.1797 0.55859-6.7617 1.2188-8.6602 0.71875-1.6797-0.46094-4.3594-2.7188-6.7617-4.7188-4.5586-3.8984-10.238-8.6992-17.66-8.6992-7.418 0-13.059 4.8203-17.66 8.6992-2.3594 2-5.0586 4.3008-6.6992 4.7188-1.8398 0.51953-5.4805-0.16016-8.6602-0.71875-5.2812-0.98047-11.219-2-16.699 0.10156-4.1406-10.441-10.859-17.762-17.102-24.52-9.1211-9.8789-17-18.441-17-36.102 0-17.66 7.8789-26.16 17-36.102 4.0391-4.3594 8.2383-9.0195 11.82-14.539l259.58 25.961h0.76172c3.8984 0 7.2188-2.9609 7.6211-6.9219 0.39844-4.1992-2.6602-7.9805-6.8594-8.3984l-254.32-25.441c0.87891-2.9219 1.4805-6.1016 1.8984-9.4805h253.04c4.2383 0 7.6797-3.4414 7.6797-7.6797s-3.4414-7.6797-7.6797-7.6797l-393.9 0.019531h-0.46094c-4.2383 0-7.6797 3.4414-7.6797 7.6797 0 17.66-7.8789 26.16-17 36.102-9.8789 10.699-21.039 22.84-21.039 46.48 0 23.66 11.16 35.781 21.039 46.48 9.1211 9.8789 17 18.441 17 36.102 0 17.66-7.8789 26.16-17 36.102-9.6797 10.539-20.641 22.48-21 45.359h-30.621c-4.2383 0-7.6797 3.4414-7.6797 7.6797 0 78.637 42.801 148.08 107.78 188.98v31.602c0 4.2383 3.4414 7.6797 7.6797 7.6797h255.18c4.2383 0 7.6797-3.4414 7.6797-7.6797v-31.602c64.977-40.898 107.78-110.34 107.78-188.98 0-4.2383-3.4414-7.6797-7.6797-7.6797zm-105.62-104.5c34.262 0 63.18 55.598 63.18 90.523 0 4.8203-0.55859 9.4805-1.5781 13.98h-12.141c0.26172-1.9414 0.35938-3.8984 0.35938-5.8789 0-27.5-22.379-49.82-49.82-49.82-2.8594 0-5.6406 0.30078-8.3398 0.76172-0.058594-3.0781-0.66016-6.1016-2.3594-9.0195-3.6406-6.3008-10.602-8.7617-16.18-10.762-2.9609-1.0781-6.3398-2.3008-7.6797-3.5781-0.82031-0.82031-1.6406-2.5586-2.3984-4.4609 10.441-12.859 23.238-21.699 36.918-21.699zm-5.4219 75.102c-2-2.3594-4.3008-5.0586-4.7188-6.6992-0.19922-0.66016-0.19922-1.6406-0.10156-2.6602 3.2188-1.0195 6.6992-1.5391 10.238-1.5391 19 0 34.461 15.461 34.461 34.461 0 2-0.19922 4-0.55859 5.8789h-34.719c0.51953-0.76172 1.0195-1.5781 1.4414-2.3984 0.10156-0.19922 0.19922-0.39844 0.30078-0.62109 0.30078-0.62109 0.62109-1.2812 0.92188-1.9414 0.10156-0.30078 0.19922-0.55859 0.30078-0.87891 0.26172-0.66016 0.39844-1.3398 0.55859-2 0.058594-0.30078 0.16016-0.55859 0.19922-0.87891 0.16016-0.98047 0.30078-2 0.30078-3.0195 0-7.3789-4.8203-13.059-8.6992-17.66zm-144.24-51.461c0.71875-1.9414 1.5391-4.3008 2.4609-6 0.51953-0.98047 1.0195-1.7383 1.5781-2.0391 1.3398-0.76172 5.8398 0 8.8008 0.55859 4.7617 0.82031 10.141 1.8008 15.301 0.39844 5.0195-1.3398 9.1211-4.8203 12.699-7.8398 2.5-2.1602 5.9414-5.0586 7.7383-5.0586 1.8008 0 5.2188 2.9219 7.7383 5.0586 3.5781 3.0781 7.6797 6.5 12.699 7.8398 5.1797 1.3789 10.539 0.39844 15.301-0.39844 2.9609-0.51953 7.4805-1.3398 8.8008-0.55859 0.76172 0.46094 1.5781 1.9414 2.3594 3.6797 0.62109 1.4414 1.1797 2.9609 1.6797 4.3594 1.4414 4 3.1211 8.3984 6.0391 11.98 0.35938 0.46094 0.71875 0.98047 1.1211 1.3789 3.7383 3.7383 8.8594 5.5781 13.359 7.1602 3.0781 1.0781 7.2812 2.6211 8.0391 4 0.62109 1.0781 0.19922 4.1406-0.26172 6.8594-0.10156 0.66016-0.19922 1.3398-0.35938 1.9414-0.87891 4.7617-1.8008 10.141-0.39844 15.301 0.16016 0.66016 0.46094 1.2188 0.71875 1.8398 1.5781 4.1406 4.5 7.7383 7.1602 10.859 2.1602 2.5 5.0586 5.9414 5.0586 7.7383 0 1.8008-2.9219 5.2188-5.0586 7.7383-1.0781 1.2812-2.1992 2.6211-3.2188 4.0391h-46.02c1.4805-1.3789 2.8203-2.8594 4.0391-4.4609 4.5-5.8789 7.2188-13.16 7.2188-21.102 0-5.7383-1.2188-11.16-3.3203-16.078-2.4609-5.8398-6.1992-11-10.859-15.16-7.3789-6.5-17-10.441-27.539-10.441-27.699 0-50.219 22.52-50.219 50.219 0 5.9414 0.87891 11.68 2.4609 17.102h-37.281c-0.92188-1.2188-1.8398-2.3984-2.8203-3.4805-0.16016-0.16016-0.30078-0.35938-0.46094-0.55859-2.1602-2.5-5.0586-5.9414-5.0586-7.7383 0-1.8008 2.9219-5.2188 5.0586-7.7383 3.0781-3.5781 6.5-7.6797 7.8398-12.699s0.46094-10.301-0.35938-14.961c0-0.10156 0-0.26172-0.058594-0.35938-0.51953-2.9609-1.3398-7.4805-0.55859-8.8008 0.82031-1.3789 5.0195-2.9219 8.0391-4 1.1211-0.39844 2.2617-0.82031 3.3789-1.2812 3.5391-1.3789 7.1211-3.1211 9.9805-5.9414 3.7383-3.7383 5.5781-8.8594 7.1602-13.359zm38.141 80.859h-16.84c-2.1602-5.2812-3.3789-11.059-3.3789-17.102 0-19.199 15.621-34.859 34.859-34.859 9.1602 0 17.262 4.7617 21.961 11.879 2.7617 4.1406 4.3594 9.1211 4.3594 14.48 0 6.3398-3.0781 11.918-7.7812 15.52-3.2812 2.5-7.3203 4.0391-11.781 4.0391-7.7812 0-14.078-6.3398-14.078-14.078 0-4.2383-3.4414-7.6797-7.6797-7.6797s-7.6797 3.4414-7.6797 7.6797c0 7.7812 3.0781 14.84 8.0391 20.121zm-67.738-210.44c-9.8789 10.699-21.039 22.84-21.039 46.48 0 23.66 11.16 35.781 21.039 46.48 7.6211 8.3008 14.34 15.719 16.34 28.219-0.39844 1.1211-0.82031 2.1992-1.1797 3.2188-1.0781 2.9609-2.3008 6.3398-3.5781 7.6797-1.3398 1.3398-4.7188 2.5-7.6797 3.5781-5.5781 2-12.539 4.5-16.18 10.762-3.5781 6.1992-2.3594 13.102-1.2812 19.199 0.55859 3.1797 1.2188 6.7617 0.71875 8.6602-0.46094 1.6797-2.7188 4.3594-4.7188 6.7617-3.8984 4.5586-8.6992 10.238-8.6992 17.66 0 4.5 1.8398 8.3984 4.1406 11.781h-28.219c0.35938-16.84 8.0391-25.301 16.941-34.922 9.8789-10.699 21.039-22.84 21.039-46.48 0-23.66-11.16-35.781-21.039-46.48-9.1211-9.8789-17-18.441-17-36.102s7.8789-26.16 17-36.102c8.7617-9.4805 18.48-20.121 20.578-38.801h29.238c-1.9414 12.641-8.6992 20.082-16.34 28.422zm-65.742 210.44h-29.379c0.35938-16.84 8.0391-25.301 16.898-34.922 9.8789-10.699 21.039-22.84 21.039-46.48 0-23.66-11.16-35.781-21.039-46.48-9.1211-9.8789-17-18.441-17-36.102 0-17.66 7.8789-26.16 17-36.102 8.7617-9.4805 18.48-20.121 20.578-38.801h29.238c-1.9414 12.641-8.6992 20.082-16.379 28.422-9.8789 10.699-21.039 22.84-21.039 46.48 0 23.66 11.16 35.781 21.039 46.48 9.1211 9.8789 17 18.441 17 36.102s-7.8789 26.16-17 36.102c-9.6797 10.539-20.641 22.48-21 45.359zm-57.18-34.922c9.8789-10.699 21.039-22.84 21.039-46.48 0-23.66-11.16-35.781-21.039-46.48-9.1211-9.8789-17-18.441-17-36.102 0-17.66 7.8789-26.16 17-36.102 8.7617-9.4805 18.48-20.121 20.578-38.801h29.238c-1.9414 12.641-8.6992 20.082-16.34 28.422-9.8789 10.699-21.039 22.84-21.039 46.48 0 23.66 11.16 35.781 21.039 46.48 9.1211 9.8789 17 18.441 17 36.102s-7.8789 26.16-17 36.102c-9.6797 10.539-20.641 22.48-21 45.359h-29.379c0.35938-16.84 8.0391-25.301 16.941-34.922zm292.36 240.48v15.059h-239.84v-20.781h239.82v5.6797zm5.8789-21.102h-251.6c-48.18-29.898-83.504-76.496-96.398-130.82h444.46c-12.898 54.316-48.238 100.92-96.398 130.82zm99.48-146.16h-450.56c-1.1797-7.5195-1.9414-15.16-2.2617-22.941h455.06c-0.30078 7.7812-1.0781 15.418-2.2617 22.941z\"/></svg>"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"apply-styling-to-svg","__idx":6},"children":["Apply styling to SVG"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example adds custom styling to change the size and color. The following CSS has been added to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme/styles.css"]}," file:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","data-title":"@theme/styles.css","header":{"title":"@theme/styles.css","controls":{"copy":{}}},"source":".example-svg-styles {\n    svg {\n        width: 80px;\n        height: auto;\n    }\n\n    path {\n        fill: blue;\n    }\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The example below adds that class to the inline SVG:"]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"InlineSvg","attributes":{"class":"example-svg-styles","file":"./images/ramen-icon.svg"},"children":[]}],"rawContent":"{% inline-svg file=\"./images/ramen-icon.svg\" .example-svg-styles /%}\n"},"children":[]},{"$$mdtype":"Tag","name":"InlineSvg","attributes":{"class":"example-svg-styles","file":"./images/ramen-icon.svg","fileRawContent":"<?xml version=\"1.0\" encoding=\"UTF-8\"?><svg width=\"512pt\" height=\"512pt\" version=\"1.1\" viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m491.36 265.12h-28.422c0.82031-4.5586 1.3398-9.2188 1.3398-13.98 0-41.68-33.738-105.88-78.539-105.88-16.582 0-31.641 8.8008-44.039 21.961-1.3398-1.6406-2.9219-3.1797-4.8594-4.3008-6.1992-3.5781-13.102-2.3594-19.199-1.2812-3.1797 0.55859-6.7617 1.2188-8.6602 0.71875-1.6797-0.46094-4.3594-2.7188-6.7617-4.7188-4.5586-3.8984-10.238-8.6992-17.66-8.6992-7.418 0-13.059 4.8203-17.66 8.6992-2.3594 2-5.0586 4.3008-6.6992 4.7188-1.8398 0.51953-5.4805-0.16016-8.6602-0.71875-5.2812-0.98047-11.219-2-16.699 0.10156-4.1406-10.441-10.859-17.762-17.102-24.52-9.1211-9.8789-17-18.441-17-36.102 0-17.66 7.8789-26.16 17-36.102 4.0391-4.3594 8.2383-9.0195 11.82-14.539l259.58 25.961h0.76172c3.8984 0 7.2188-2.9609 7.6211-6.9219 0.39844-4.1992-2.6602-7.9805-6.8594-8.3984l-254.32-25.441c0.87891-2.9219 1.4805-6.1016 1.8984-9.4805h253.04c4.2383 0 7.6797-3.4414 7.6797-7.6797s-3.4414-7.6797-7.6797-7.6797l-393.9 0.019531h-0.46094c-4.2383 0-7.6797 3.4414-7.6797 7.6797 0 17.66-7.8789 26.16-17 36.102-9.8789 10.699-21.039 22.84-21.039 46.48 0 23.66 11.16 35.781 21.039 46.48 9.1211 9.8789 17 18.441 17 36.102 0 17.66-7.8789 26.16-17 36.102-9.6797 10.539-20.641 22.48-21 45.359h-30.621c-4.2383 0-7.6797 3.4414-7.6797 7.6797 0 78.637 42.801 148.08 107.78 188.98v31.602c0 4.2383 3.4414 7.6797 7.6797 7.6797h255.18c4.2383 0 7.6797-3.4414 7.6797-7.6797v-31.602c64.977-40.898 107.78-110.34 107.78-188.98 0-4.2383-3.4414-7.6797-7.6797-7.6797zm-105.62-104.5c34.262 0 63.18 55.598 63.18 90.523 0 4.8203-0.55859 9.4805-1.5781 13.98h-12.141c0.26172-1.9414 0.35938-3.8984 0.35938-5.8789 0-27.5-22.379-49.82-49.82-49.82-2.8594 0-5.6406 0.30078-8.3398 0.76172-0.058594-3.0781-0.66016-6.1016-2.3594-9.0195-3.6406-6.3008-10.602-8.7617-16.18-10.762-2.9609-1.0781-6.3398-2.3008-7.6797-3.5781-0.82031-0.82031-1.6406-2.5586-2.3984-4.4609 10.441-12.859 23.238-21.699 36.918-21.699zm-5.4219 75.102c-2-2.3594-4.3008-5.0586-4.7188-6.6992-0.19922-0.66016-0.19922-1.6406-0.10156-2.6602 3.2188-1.0195 6.6992-1.5391 10.238-1.5391 19 0 34.461 15.461 34.461 34.461 0 2-0.19922 4-0.55859 5.8789h-34.719c0.51953-0.76172 1.0195-1.5781 1.4414-2.3984 0.10156-0.19922 0.19922-0.39844 0.30078-0.62109 0.30078-0.62109 0.62109-1.2812 0.92188-1.9414 0.10156-0.30078 0.19922-0.55859 0.30078-0.87891 0.26172-0.66016 0.39844-1.3398 0.55859-2 0.058594-0.30078 0.16016-0.55859 0.19922-0.87891 0.16016-0.98047 0.30078-2 0.30078-3.0195 0-7.3789-4.8203-13.059-8.6992-17.66zm-144.24-51.461c0.71875-1.9414 1.5391-4.3008 2.4609-6 0.51953-0.98047 1.0195-1.7383 1.5781-2.0391 1.3398-0.76172 5.8398 0 8.8008 0.55859 4.7617 0.82031 10.141 1.8008 15.301 0.39844 5.0195-1.3398 9.1211-4.8203 12.699-7.8398 2.5-2.1602 5.9414-5.0586 7.7383-5.0586 1.8008 0 5.2188 2.9219 7.7383 5.0586 3.5781 3.0781 7.6797 6.5 12.699 7.8398 5.1797 1.3789 10.539 0.39844 15.301-0.39844 2.9609-0.51953 7.4805-1.3398 8.8008-0.55859 0.76172 0.46094 1.5781 1.9414 2.3594 3.6797 0.62109 1.4414 1.1797 2.9609 1.6797 4.3594 1.4414 4 3.1211 8.3984 6.0391 11.98 0.35938 0.46094 0.71875 0.98047 1.1211 1.3789 3.7383 3.7383 8.8594 5.5781 13.359 7.1602 3.0781 1.0781 7.2812 2.6211 8.0391 4 0.62109 1.0781 0.19922 4.1406-0.26172 6.8594-0.10156 0.66016-0.19922 1.3398-0.35938 1.9414-0.87891 4.7617-1.8008 10.141-0.39844 15.301 0.16016 0.66016 0.46094 1.2188 0.71875 1.8398 1.5781 4.1406 4.5 7.7383 7.1602 10.859 2.1602 2.5 5.0586 5.9414 5.0586 7.7383 0 1.8008-2.9219 5.2188-5.0586 7.7383-1.0781 1.2812-2.1992 2.6211-3.2188 4.0391h-46.02c1.4805-1.3789 2.8203-2.8594 4.0391-4.4609 4.5-5.8789 7.2188-13.16 7.2188-21.102 0-5.7383-1.2188-11.16-3.3203-16.078-2.4609-5.8398-6.1992-11-10.859-15.16-7.3789-6.5-17-10.441-27.539-10.441-27.699 0-50.219 22.52-50.219 50.219 0 5.9414 0.87891 11.68 2.4609 17.102h-37.281c-0.92188-1.2188-1.8398-2.3984-2.8203-3.4805-0.16016-0.16016-0.30078-0.35938-0.46094-0.55859-2.1602-2.5-5.0586-5.9414-5.0586-7.7383 0-1.8008 2.9219-5.2188 5.0586-7.7383 3.0781-3.5781 6.5-7.6797 7.8398-12.699s0.46094-10.301-0.35938-14.961c0-0.10156 0-0.26172-0.058594-0.35938-0.51953-2.9609-1.3398-7.4805-0.55859-8.8008 0.82031-1.3789 5.0195-2.9219 8.0391-4 1.1211-0.39844 2.2617-0.82031 3.3789-1.2812 3.5391-1.3789 7.1211-3.1211 9.9805-5.9414 3.7383-3.7383 5.5781-8.8594 7.1602-13.359zm38.141 80.859h-16.84c-2.1602-5.2812-3.3789-11.059-3.3789-17.102 0-19.199 15.621-34.859 34.859-34.859 9.1602 0 17.262 4.7617 21.961 11.879 2.7617 4.1406 4.3594 9.1211 4.3594 14.48 0 6.3398-3.0781 11.918-7.7812 15.52-3.2812 2.5-7.3203 4.0391-11.781 4.0391-7.7812 0-14.078-6.3398-14.078-14.078 0-4.2383-3.4414-7.6797-7.6797-7.6797s-7.6797 3.4414-7.6797 7.6797c0 7.7812 3.0781 14.84 8.0391 20.121zm-67.738-210.44c-9.8789 10.699-21.039 22.84-21.039 46.48 0 23.66 11.16 35.781 21.039 46.48 7.6211 8.3008 14.34 15.719 16.34 28.219-0.39844 1.1211-0.82031 2.1992-1.1797 3.2188-1.0781 2.9609-2.3008 6.3398-3.5781 7.6797-1.3398 1.3398-4.7188 2.5-7.6797 3.5781-5.5781 2-12.539 4.5-16.18 10.762-3.5781 6.1992-2.3594 13.102-1.2812 19.199 0.55859 3.1797 1.2188 6.7617 0.71875 8.6602-0.46094 1.6797-2.7188 4.3594-4.7188 6.7617-3.8984 4.5586-8.6992 10.238-8.6992 17.66 0 4.5 1.8398 8.3984 4.1406 11.781h-28.219c0.35938-16.84 8.0391-25.301 16.941-34.922 9.8789-10.699 21.039-22.84 21.039-46.48 0-23.66-11.16-35.781-21.039-46.48-9.1211-9.8789-17-18.441-17-36.102s7.8789-26.16 17-36.102c8.7617-9.4805 18.48-20.121 20.578-38.801h29.238c-1.9414 12.641-8.6992 20.082-16.34 28.422zm-65.742 210.44h-29.379c0.35938-16.84 8.0391-25.301 16.898-34.922 9.8789-10.699 21.039-22.84 21.039-46.48 0-23.66-11.16-35.781-21.039-46.48-9.1211-9.8789-17-18.441-17-36.102 0-17.66 7.8789-26.16 17-36.102 8.7617-9.4805 18.48-20.121 20.578-38.801h29.238c-1.9414 12.641-8.6992 20.082-16.379 28.422-9.8789 10.699-21.039 22.84-21.039 46.48 0 23.66 11.16 35.781 21.039 46.48 9.1211 9.8789 17 18.441 17 36.102s-7.8789 26.16-17 36.102c-9.6797 10.539-20.641 22.48-21 45.359zm-57.18-34.922c9.8789-10.699 21.039-22.84 21.039-46.48 0-23.66-11.16-35.781-21.039-46.48-9.1211-9.8789-17-18.441-17-36.102 0-17.66 7.8789-26.16 17-36.102 8.7617-9.4805 18.48-20.121 20.578-38.801h29.238c-1.9414 12.641-8.6992 20.082-16.34 28.422-9.8789 10.699-21.039 22.84-21.039 46.48 0 23.66 11.16 35.781 21.039 46.48 9.1211 9.8789 17 18.441 17 36.102s-7.8789 26.16-17 36.102c-9.6797 10.539-20.641 22.48-21 45.359h-29.379c0.35938-16.84 8.0391-25.301 16.941-34.922zm292.36 240.48v15.059h-239.84v-20.781h239.82v5.6797zm5.8789-21.102h-251.6c-48.18-29.898-83.504-76.496-96.398-130.82h444.46c-12.898 54.316-48.238 100.92-96.398 130.82zm99.48-146.16h-450.56c-1.1797-7.5195-1.9414-15.16-2.2617-22.941h455.06c-0.30078 7.7812-1.0781 15.418-2.2617 22.941z\"/></svg>"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"best-practices","__idx":7},"children":["Best practices"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can improve page performance by using a single SVG file and applying styling changes using CSS. That way you don't have to load separate files."]}]},"frontmatter":{},"tagList":["inline-svg","markdoc-example","markdoc-tag-badge","table"],"title":"Inline SVG Tag","lastModified":"2025-05-28T16:01:32.000Z"}