To have crisp documentation images on high DPI displays use images. .st0{fill:#5CB8CD;} .st1{fill:#FB8A52;} .st2{fill:#152D39;} .st3{fill:#E8E8E8;} SVG :include-svg: with-groups.svg

If you have that you want to display while hiding everything else, pass the IDs to the property. .st0{fill:#5CB8CD;} .st1{fill:#FB8A52;} .st2{fill:#152D39;} .st3{fill:#E8E8E8;} In presentation mode, groups will be displayed one at a time in the order specified. To force all specified parts to appear at once add this before (either in the same section, or at the start of a document). This SVG image is taken and modified from https://www.shareicon.net/pyramid-piramid-draw-stock-877888 groups idsToReveal :include-svg: with-groups.svg {idsToReveal: ["partA", "partB"]} :include-meta: {allAtOnce: true} <?xml version="1.0" ?> <svg version="1.1" viewBox="0 0 512 512" width="256" height="256" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <style type="text/css"> .st0{fill:#5CB8CD;} .st1{fill:#FB8A52;} .st2{fill:#152D39;} .st3{fill:#E8E8E8;} </style> <g id="partA"> <path class="st2" d="M109.4,397.7c-0.8-3.8-0.4-7.9,1.4-11.8l127.9-279.4c2.3-5.1,6.4-8.5,11-10.1V6 c-4.6,1.6-8.6,4.9-11,10.1L52.1,423.6c-1.9,4.1-2.2,8.3-1.3,12.2L109.4,397.7z" /> <path class="st2" d="M160.4,325.4c-43.8,0-79.4-35.6-79.4-79.4s35.6-79.4,79.4-79.4s79.4,35.6,79.4,79.4 S204.2,325.4,160.4,325.4z" /> <circle class="st3" cx="160.4" cy="246" r="68.1"/> <path class="st2" d="M168.2,253.3h-11.3l-2.7,7.8H150l10.9-30.1h3.5l10.6,30.1h-4.2L168.2,253.3z M158,249.9h9l-4.4-12.9h-0.1 L158,249.9z"/> </g> <g id="partC"> <path class="st1" d="M394.8,409.5c-3,2.1-6.8,3.4-10.9,3.4H128.1c-4.7,0-8.9-1.6-12.1-4.3l-58.3,37.9 c3.2,2.5,7.2,4,11.8,4h373.1c4,0,7.6-1.2,10.5-3.2L394.8,409.5z" /> <path class="st1" d="M262.4,506c-43.8,0-79.4-35.6-79.4-79.4s35.6-79.4,79.4-79.4s79.4,35.6,79.4,79.4 S306.1,506,262.4,506z" /> <circle class="st3" cx="262.4" cy="426.6" id="XMLID_7_" r="68.1"/> <path class="st1" d="M274.8,432.6l0,0.1c0.1,3.1-1,5.7-3.3,7.8c-2.3,2.1-5.2,3.2-8.9,3.2c-3.8,0-6.8-1.3-9.2-4 c-2.4-2.7-3.6-6.1-3.6-10.2v-5.9c0-4.1,1.2-7.5,3.6-10.2c2.4-2.7,5.4-4,9.2-4c3.8,0,6.8,1,9,3c2.2,2,3.3,4.7,3.2,8l0,0.1h-4.3 c0-2.3-0.7-4.2-2.1-5.5c-1.4-1.4-3.3-2-5.8-2c-2.5,0-4.5,1-6,3c-1.5,2-2.2,4.5-2.2,7.5v6c0,3,0.7,5.6,2.2,7.6c1.5,2,3.5,3,6,3 c2.5,0,4.4-0.7,5.8-2c1.4-1.3,2.1-3.2,2.1-5.6H274.8z"/> </g> <g id="partB"> <path class="st0" d="M262.4,96.5c4.6,1.6,8.6,4.9,11,10.1l127.9,279.4c2,4.4,2.2,9.1,1,13.2l58.5,38.1 c1.4-4.3,1.2-9.1-0.9-13.6L273.4,16.1c-2.3-5.1-6.4-8.5-11-10.1V96.5z"/> <path class="st0" d="M364.3,325.4c-43.8,0-79.4-35.6-79.4-79.4s35.6-79.4,79.4-79.4s79.4,35.6,79.4,79.4 S408.1,325.4,364.3,325.4z" /> <circle class="st3" cx="364.3" cy="246" id="XMLID_9_" r="68.1"/> <path class="st0" d="M352.7,263.2v-34.4h11.2c3.6,0,6.4,0.8,8.4,2.3c2,1.6,3,3.9,3,7c0,1.5-0.5,2.8-1.4,4c-0.9,1.2-2.1,2.1-3.6,2.7 c2.3,0.3,4,1.3,5.3,2.9c1.3,1.6,2,3.6,2,5.8c0,3.1-1,5.6-3.1,7.2c-2,1.7-4.8,2.5-8.3,2.5H352.7z M357.3,243.4h7.5 c1.7,0,3.1-0.5,4.2-1.4c1.1-1,1.6-2.3,1.6-4c0-1.9-0.6-3.2-1.8-4.2c-1.2-0.9-2.9-1.4-5.1-1.4h-6.6V243.4z M357.3,247.1v12.5h9 c2.1,0,3.8-0.5,4.9-1.6c1.2-1,1.8-2.5,1.8-4.5c0-1.9-0.6-3.4-1.8-4.6c-1.2-1.2-2.8-1.8-4.8-1.9h-0.3H357.3z"/> </g> </svg>

SVGs may have additional white space around the content and have width and height property specified inside. Use if you want to use the actual content only and effectively crop the white space. and will be overridden with the cropped size. .st0{fill:#5CB8CD;} .st1{fill:#FB8A52;} .st2{fill:#152D39;} .st3{fill:#E8E8E8;} Without there would be a gap created by hiding other parts. actualSize: true width height :include-svg: with-groups.svg {idsToReveal: ["partC"], actualSize: true} actualSize

Use to change the size of the SVG provided .st0{fill:#5CB8CD;} .st1{fill:#FB8A52;} .st2{fill:#152D39;} .st3{fill:#E8E8E8;} scale: scaleFactor :include-svg: with-groups.svg {idsToReveal: ["partC"], actualSize: true, scale: 0.2}

Use to automatically scale down wide SVGs to fit within the available content width. This is useful for diagrams that are designed to be wide but need to adapt to different screen sizes. Design Develop Test Release Monitor Without , the SVG would overflow the content area on narrow screens. fit: true :include-svg: wide-boxes.svg {fit: true} fit