SVG
Viewer
Dark mode
Light mode
Hide sidebar
Any license
Apache
BSD
CC Attribution
CC0
GPL
MIT
OFL
Public domain
CbCNT1qs
N/A
Send feedback
Browse all SVGs
Terms & Conditions
Privacy Policy
Rotate
Flip Y
Flip X
Colors
Edit colors
-1px x -1px
Change dimensions
Optimize
1.57 KB
699 bytes
-57%
Optimize options
Prettify
Prettify options
Edit
with AI
Describe a change to make
Create
Describe a new SVG to make
Wrap
Stop wrapping long lines
Clear
<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" preserveAspectRatio="xMidYMid meet" viewBox="-20 -20 140 140" height="20mm" width="20mm" version="1.2"> <g style="fill: blue; fill-opacity: 0.7;"> <rect y="0" x="0" height="20" width="20"></rect> <rect y="0" x="40" height="20" width="20"></rect> <rect y="0" x="80" height="20" width="20"></rect> <rect y="20" x="40" height="20" width="20"></rect> <rect y="40" x="0" height="20" width="20"></rect> <rect y="40" x="20" height="20" width="20"></rect> <rect y="40" x="60" height="20" width="20"></rect> <rect y="40" x="80" height="20" width="20"></rect> <rect y="80" x="40" height="20" width="20"></rect> </g> <defs> <mask maskContentUnits="userSpaceOnUse" id="Mask"> <rect style="fill-opacity: 0.5; fill: white;" y="-20" x="-20" height="140" width="140"></rect> <g style="fill: blue; fill-opacity: 1.0;"> <rect y="0" x="0" height="20" width="20"></rect> <rect y="0" x="40" height="20" width="20"></rect> <rect y="0" x="80" height="20" width="20"></rect> <rect y="20" x="40" height="20" width="20"></rect> <rect y="40" x="0" height="20" width="20"></rect> <rect y="40" x="20" height="20" width="20"></rect> <rect y="40" x="60" height="20" width="20"></rect> <rect y="40" x="80" height="20" width="20"></rect> <rect y="80" x="40" height="20" width="20"></rect> </g> </mask> </defs> <rect mask="url(#Mask)" style="fill-opacity: 1.0; fill: red;" y="-20" x="-20" height="140" width="140"></rect> </svg>
Upload
Copy
Download
Share
Preview
React
React Native
PNG
Data URI
100%
Download SVG
SVG
Viewer
Dark mode
Light mode
Edit
Export
Rotate
Flip Y
Flip X
Colors
Edit colors
-1px x -1px
Change dimensions
Optimize
1.57 KB
699 bytes
-57%
Optimize options
Prettify
Prettify options
Edit
with AI
Describe a change to make
Create
Describe a new SVG to make
Wrap
Stop wrapping long lines
Clear
<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" preserveAspectRatio="xMidYMid meet" viewBox="-20 -20 140 140" height="20mm" width="20mm" version="1.2"> <g style="fill: blue; fill-opacity: 0.7;"> <rect y="0" x="0" height="20" width="20"></rect> <rect y="0" x="40" height="20" width="20"></rect> <rect y="0" x="80" height="20" width="20"></rect> <rect y="20" x="40" height="20" width="20"></rect> <rect y="40" x="0" height="20" width="20"></rect> <rect y="40" x="20" height="20" width="20"></rect> <rect y="40" x="60" height="20" width="20"></rect> <rect y="40" x="80" height="20" width="20"></rect> <rect y="80" x="40" height="20" width="20"></rect> </g> <defs> <mask maskContentUnits="userSpaceOnUse" id="Mask"> <rect style="fill-opacity: 0.5; fill: white;" y="-20" x="-20" height="140" width="140"></rect> <g style="fill: blue; fill-opacity: 1.0;"> <rect y="0" x="0" height="20" width="20"></rect> <rect y="0" x="40" height="20" width="20"></rect> <rect y="0" x="80" height="20" width="20"></rect> <rect y="20" x="40" height="20" width="20"></rect> <rect y="40" x="0" height="20" width="20"></rect> <rect y="40" x="20" height="20" width="20"></rect> <rect y="40" x="60" height="20" width="20"></rect> <rect y="40" x="80" height="20" width="20"></rect> <rect y="80" x="40" height="20" width="20"></rect> </g> </mask> </defs> <rect mask="url(#Mask)" style="fill-opacity: 1.0; fill: red;" y="-20" x="-20" height="140" width="140"></rect> </svg>
Upload
Copy
Download
Share
Preview
React
React Native
PNG
Data URI
100%
Download SVG