HTML <svg>
query_builder | Christopher PisaniThe HTML element <svg> which stands for Scalable Vector Graphics, acts as a canvas for SVG graphics. Various shaping elements can be used to draw within the canvas.
A simple <svg> example
<svg width="280" height="280">
<rect x="20" y="20" width="200" height="200" style="fill:red;stroke:black;stroke-width:3;" />
</svg>
When using drawing software like Adobe Illustrator, data can be saved as SVG. The following code is data saved from an Adobe Illustrator drawing.
Code from Adobe Illustrator drawing
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 600 600" style="enable-background:new 0 0 600 600;" xml:space="preserve">
<style type="text/css">
.st0{fill:#669DBE;}
.st1{fill:#B9B9B9;}
.st2{fill:#D8D9D8;}
.st3{fill:#D7A70C;}
.st4{fill:#FBC40E;}
.st5{fill:#BA1F2F;}
.st6{fill:#B92030;}
.st7{fill:#25475F;}
.st8{fill:#213E52;}
.st9{fill:#FDF8EF;}
.st10{fill:#D0A417;}
.st11{fill:#F9C314;}
.st12{fill:#353430;}
.st13{fill:#393937;}
</style>
<g>
<path class="st0" d="M85.35,506.84l-0.29,0.34c2.85-0.36,5.48-1.09,6.72-4.1l-0.03,0.15c26.73-16.2,53.97-31.63,79.99-48.91
c13.38-8.89,17.54-5.83,21.13,8.41c4.77,18.91,11.5,37.33,18.95,60.92c6.17-18.33,10.61-31.58,15.09-44.81
c18.36-54.19,18.36-54.19-23.69-92.18c-0.41-0.37-1.01-0.51-1.53-0.76c-10.28-10.69-20.52-21.42-30.89-32.03
c-2.69-2.75-5.06-6.22-10.12-4.13c-25.98,10.72-52.03,21.25-81.92,33.43c19.81,5.95,34.3,11.67,49.35,14.46
c16.58,3.08,13.36,9.47,6.45,19.75c-18.18,27.03-35.69,54.51-53.44,81.84c-2.17,3.34-5.96,6.89-5.82,10.22
c0.29,7.13,3.71,2.14,5.98,0.57C82.65,508.94,84,507.89,85.35,506.84z"/>
<path class="st0" d="M493.75,87.83c-29.92,2.75-58.23,11.47-85.72,23.2c-66.74,25.53-121.54,68.44-171.68,118.12
c-33.51-23.45-66.29-19.39-98.3,3c-19.18,13.41-34.71,30.51-49.49,50.29c14.56,1.7,26.72-4.16,39.46-5.21
c20.76-1.71,41.19-2.63,57.2,14.37c-3.33,11.72-12.21,20.19-18.02,30.46c-2.91,5.14-6.58,10.28-1.31,15.29
c15.09,14.35,27.36,31.73,45.61,42.7c11.16,18.94,29.34,31.38,43.79,47.28c4.82,5.3,9.58,1.33,13.8-1.1
c10.83-6.23,21.43-12.86,32.12-19.34c20.55,29.32,8.33,60.77,4.14,94.8c21.19-15.36,37.63-30.62,51.11-49.15
c22.2-30.52,27.18-62.02,6.16-95.27c2.14-3.26,3.81-6.97,6.48-9.7c27.14-27.68,51.22-57.85,70.09-91.64
c13.44-24.06,29.3-47.33,34.02-75.45c16.77-27.46,21-58.71,26.72-89.46C500.62,87.27,496.59,87.48,493.75,87.83z"/>
<path class="st1" d="M473.21,180.49c-4.74,28.11-20.59,51.38-34.03,75.44c-18.87,33.79-42.95,63.96-70.09,91.64
c-2.68,2.73-4.35,6.44-6.48,9.71c-20.47,16.54-40.94,33.08-61.42,49.61c-10.69,6.47-21.29,13.11-32.12,19.34
c-4.22,2.43-8.98,6.4-13.8,1.1c-14.46-15.89-32.63-28.34-43.79-47.28c2.99-7.13,9.31-11.42,14.44-16.65
c42.28-43.04,84.67-85.97,127.03-128.93c0.99,0.24,1.98,0.44,2.99,0.62c16.37,12.65,32.87,12.33,45.36-0.9
c12.11-12.81,11.85-28.5-0.71-44.02c-0.15-0.97-0.32-1.93-0.5-2.9c11.06-8.22,20.87-17.67,28.78-29.01
c0.99,0.25,1.98,0.48,2.97,0.69C442.65,171.86,457.2,177.59,473.21,180.49z"/>
<path class="st2" d="M352.97,234.47c-42.36,42.96-84.75,85.89-127.03,128.93c-5.14,5.23-11.45,9.52-14.44,16.65
c-18.25-10.96-30.53-28.34-45.61-42.69c-5.26-5.01-1.6-10.14,1.31-15.29c5.81-10.28,14.69-18.74,18.02-30.47
c17.04-20.82,34.1-41.63,51.15-62.45c50.14-49.68,104.93-92.59,171.68-118.12c1.66,18.08,9.78,33.31,20.85,47.23
c-7.91,11.34-17.72,20.8-28.78,29.01c-20.03-10.73-33.87-10.61-45.34,1.6c-11.49,12.23-13.3,26.01-3.73,40.5
C351.68,231.06,352.32,232.77,352.97,234.47z"/>
<path class="st3" d="M201.7,385.89c0.51,0.25,1.12,0.39,1.53,0.76c42.05,38,42.05,38,23.69,92.18
c-4.48,13.23-8.92,26.48-15.09,44.81c-7.45-23.58-14.18-42-18.95-60.92c-3.59-14.24-7.75-17.3-21.13-8.41
c-26.01,17.28-53.25,32.71-79.99,48.91c-0.61-8.22,6.19-11.74,10.77-16.43C135.49,453.08,168.62,419.51,201.7,385.89z"/>
<path class="st4" d="M201.7,385.89c-33.08,33.62-66.2,67.19-99.17,100.92c-4.58,4.69-11.39,8.21-10.77,16.43
c0,0,0.03-0.15,0.03-0.15c-3.2-0.21-5.92,0.37-6.72,4.1c0,0,0.29-0.34,0.28-0.34c-1.35,1.05-2.7,2.1-4.05,3.15
c-2.27,1.57-5.69,6.56-5.98-0.57c-0.14-3.33,3.65-6.88,5.82-10.22c17.74-27.32,35.26-54.8,53.44-81.84
c6.91-10.27,10.13-16.67-6.45-19.75c-15.04-2.79-29.54-8.51-49.35-14.46c29.9-12.18,55.95-22.71,81.92-33.43
c5.06-2.09,7.43,1.38,10.12,4.13C181.17,364.47,191.41,375.2,201.7,385.89z"/>
<path class="st5" d="M236.35,229.15c-17.05,20.81-34.1,41.63-51.15,62.45c-16-17-36.44-16.08-57.19-14.37
c-12.74,1.05-24.9,6.91-39.46,5.21c14.79-19.78,30.32-36.88,49.49-50.29C170.06,209.77,202.84,205.7,236.35,229.15z"/>
<path class="st6" d="M301.2,406.89c20.47-16.54,40.95-33.07,61.42-49.61c21.01,33.24,16.04,64.74-6.16,95.26
c-13.49,18.53-29.92,33.79-51.11,49.15C309.53,467.66,321.75,436.21,301.2,406.89z"/>
<path class="st7" d="M428.88,158.27c-11.07-13.93-19.19-29.15-20.85-47.23c27.49-11.74,55.8-20.45,85.72-23.2
c0.92,8.01-4.8,12.29-9.55,17.17c-17.48,17.96-34.9,35.96-52.35,53.95C430.85,158.74,429.86,158.51,428.88,158.27z"/>
<path class="st8" d="M431.85,158.95c17.44-17.99,34.87-36,52.35-53.95c4.75-4.88,10.47-9.16,9.55-17.17
c2.84-0.35,6.87-0.56,6.17,3.2c-5.72,30.75-9.94,62-26.71,89.46C457.2,177.59,442.65,171.86,431.85,158.95z"/>
<path class="st9" d="M270.06,159.27c1.24,0.45,2.48,0.9,3.72,1.35c-0.42,0.14-1,0.54-1.23,0.39c-0.84-0.55-1.55-1.28-2.32-1.94
C270.24,159.07,270.06,159.27,270.06,159.27z"/>
<path class="st3" d="M85.07,507.18c0.8-3.73,3.52-4.31,6.72-4.1C90.55,506.09,87.92,506.82,85.07,507.18z"/>
<path class="st3" d="M81.29,509.99c1.35-1.05,2.7-2.1,4.05-3.15C84,507.89,82.65,508.94,81.29,509.99z"/>
<path class="st10" d="M400.6,190.18c12.56,15.52,12.82,31.2,0.71,44.02c-12.49,13.22-28.99,13.55-45.36,0.9
c0.02-2.22,0.04-4.44,0.06-6.65c0,0,1.38-0.17,1.38-0.17l1.39,0.06c13.74,12.11,26.3,12.75,37.16,1.9
c10.81-10.8,10.18-23.59-1.81-37.1c-0.18-0.94-0.39-1.88-0.63-2.8C395.87,190.28,398.23,190.23,400.6,190.18z"/>
<path class="st11" d="M400.6,190.18c-2.37,0.05-4.73,0.1-7.1,0.15c-27.44-10.16-41.63-0.23-40.7,28.49
c0.09,2.83,0.35,5.65,0.53,8.48c-0.77,0.7-1.54,1.39-2.31,2.08c-9.56-14.5-7.76-28.27,3.73-40.5c11.47-12.2,25.31-12.32,45.34-1.6
C400.28,188.24,400.45,189.21,400.6,190.18z"/>
<path class="st11" d="M356.02,228.43c-0.02,2.22-0.04,4.44-0.06,6.65c-1-0.18-2-0.38-2.99-0.62c-0.64-1.7-1.29-3.4-1.94-5.1
c0.77-0.69,1.53-1.38,2.3-2.07C354.36,227.36,355.26,227.74,356.02,228.43z"/>
<path class="st12" d="M394.14,193.13c12,13.51,12.62,26.3,1.81,37.1c-10.86,10.85-23.42,10.21-37.16-1.9
C372.24,218.26,383.89,206.41,394.14,193.13z"/>
<path class="st13" d="M394.14,193.13c-10.24,13.28-21.9,25.13-35.34,35.19c0,0-1.39-0.06-1.39-0.06s-1.38,0.17-1.38,0.17
c-0.76-0.7-1.66-1.08-2.68-1.14c-0.18-2.83-0.44-5.65-0.53-8.48c-0.93-28.72,13.26-38.65,40.7-28.49
C393.75,191.25,393.96,192.19,394.14,193.13z"/>
</g>
</svg>
Available Attributes
No specific attributes are assigned for this element, other than the standard global attributes.