progressive-webapps/rendering-performance/the-pixel-pipeline
Created with Sketch.
SVG
Viewer
Dark mode
Light mode
Hide sidebar
Any license
Apache
BSD
CC Attribution
CC0
GPL
MIT
OFL
Public domain
The Pixel Pipeline
Web Skills Flat Vectors
View collection
Send feedback
Browse all SVGs
Terms & Conditions
Privacy Policy
Rotate
Flip Y
Flip X
Colors
Edit colors
-1px x -1px
Change dimensions
Optimize
4.47 KB
1.81 KB
-60%
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
<?xml version="1.0" encoding="UTF-8"?> <!-- License: MIT. Made by Andreas Mehlsen: https://github.com/andreasbm/web-skills/ --> <svg width="800px" height="800px" viewBox="0 0 73 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>progressive-webapps/rendering-performance/the-pixel-pipeline</title> <desc>Created with Sketch.</desc> <defs> <rect id="path-1" x="0" y="0" width="69" height="69" rx="14"> </rect> </defs> <g id="progressive-webapps/rendering-performance/the-pixel-pipeline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="container" transform="translate(2.000000, 2.000000)"> <rect id="mask" stroke="#41769E" stroke-width="2" fill="#FFFFFF" fill-rule="nonzero" x="-1" y="-1" width="71" height="71" rx="14"> </rect> <g id="pipe"> <mask id="mask-2" fill="white"> <use xlink:href="#path-1"> </use> </mask> <rect stroke="#41769E" stroke-width="2" x="-1" y="-1" width="71" height="71" rx="14"> </rect> <g mask="url(#mask-2)" fill-rule="nonzero" id="Shape"> <g transform="translate(3.000000, -2.000000)"> <path d="M2.51739501,20.1380463 L22.6548842,20.1380463 C24.045578,20.1380463 25.1722792,19.010788 25.1722792,17.6206512 C25.1722792,16.2305145 24.045578,15.1038131 22.6548842,15.1038131 L2.51739501,15.1038131 C1.13115695,15.1138381 0.0100250244,16.2349701 0,17.6206512 C0.00389862772,19.0091171 1.12892917,20.1335907 2.51739501,20.1380463 Z" fill="#41769E"> </path> <path d="M37.7586974,55.3793485 C37.762596,56.7678144 38.8876265,57.8922879 40.2755355,57.8961866 L60.4135816,57.8961866 C61.7998196,57.8861616 62.9209516,56.7650296 62.9309766,55.3793485 C62.9270779,53.9908826 61.8020476,52.866409 60.4135816,52.8619535 L40.2755355,52.8619535 C38.8870696,52.866409 37.762596,53.9908826 37.7586974,55.3793485 Z" fill="#41769E"> </path> <path d="M31.4652098,49.086418 C32.8542327,49.0819624 33.9787062,47.9574888 33.9826048,46.569023 L33.9826048,26.4309767 C33.9725799,25.0452956 32.8514479,23.9241637 31.4652098,23.9135817 C30.076744,23.9180373 28.9522704,25.0425109 28.9483717,26.4309767 L28.9483717,46.569023 C28.9522704,47.9574888 30.076744,49.0819624 31.4652098,49.086418 Z" fill="#41769E"> </path> <polygon fill="#5AAAE7" points="2.51739501 0 12.5858612 0 12.5858612 15.1032562 2.51739501 15.1032562"> </polygon> <polygon fill="#78B9EB" points="12.5858612 0 22.6548842 0 22.6548842 15.1032562 12.5858612 15.1032562"> </polygon> <polygon fill="#5AAAE7" points="40.2755355 57.8967435 50.3445584 57.8967435 50.3445584 72.9999997 40.2755355 72.9999997"> </polygon> <polygon fill="#78B9EB" points="50.3445584 57.8967435 60.4135816 57.8967435 60.4135816 72.9999997 50.3445584 72.9999997"> </polygon> <path d="M40.2755355,37.7586974 L33.9826048,37.7586974 L33.9826048,46.569023 L37.7586974,46.569023 C39.1488341,46.569023 40.2755355,47.6957244 40.2755355,49.086418 L40.2755355,52.8619535 L50.3445584,52.8619535 L50.3445584,47.8277205 C50.3445584,42.2666166 45.8366392,37.7586974 40.2755355,37.7586974 Z" fill="#5AAAE7"> </path> <path d="M60.4135816,41.534233 C60.4135816,33.1928558 53.6517027,26.4309767 45.3103255,26.4309767 L33.9826048,26.4309767 L33.9826048,37.7586974 L40.2755355,37.7586974 C45.8366392,37.7586974 50.3445584,42.2666166 50.3445584,47.8277205 L50.3445584,52.8619535 L60.4135816,52.8619535 L60.4135816,41.534233 Z" fill="#78B9EB"> </path> <path d="M25.1722792,26.4309767 C23.7821425,26.4309767 22.6548842,25.3042753 22.6548842,23.9135817 L22.6548842,20.1380463 L12.5864181,20.1380463 L12.5864181,27.6896742 C12.5864181,33.2507781 17.0943374,37.7586974 22.6548842,37.7586974 L28.9483717,37.7586974 L28.9483717,26.4309767 L25.1722792,26.4309767 Z" fill="#78B9EB"> </path> <path d="M12.5858612,27.6896742 L12.5858612,20.1380463 L2.51739501,20.1380463 L2.51739501,31.4657667 C2.51739501,39.8071439 9.27927391,46.569023 17.6206512,46.569023 L28.9483717,46.569023 L28.9483717,37.7586974 L22.6548842,37.7586974 C17.0943374,37.7586974 12.5858612,33.2507781 12.5858612,27.6896742 Z" fill="#5AAAE7"> </path> </g> </g> </g> </g> </g> </svg>
Upload
Copy
Download
Share
Preview
React
React Native
PNG
Data URI
progressive-webapps/rendering-performance/the-pixel-pipeline
Created with Sketch.
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
4.47 KB
1.81 KB
-60%
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
<?xml version="1.0" encoding="UTF-8"?> <!-- License: MIT. Made by Andreas Mehlsen: https://github.com/andreasbm/web-skills/ --> <svg width="800px" height="800px" viewBox="0 0 73 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>progressive-webapps/rendering-performance/the-pixel-pipeline</title> <desc>Created with Sketch.</desc> <defs> <rect id="path-1" x="0" y="0" width="69" height="69" rx="14"> </rect> </defs> <g id="progressive-webapps/rendering-performance/the-pixel-pipeline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="container" transform="translate(2.000000, 2.000000)"> <rect id="mask" stroke="#41769E" stroke-width="2" fill="#FFFFFF" fill-rule="nonzero" x="-1" y="-1" width="71" height="71" rx="14"> </rect> <g id="pipe"> <mask id="mask-2" fill="white"> <use xlink:href="#path-1"> </use> </mask> <rect stroke="#41769E" stroke-width="2" x="-1" y="-1" width="71" height="71" rx="14"> </rect> <g mask="url(#mask-2)" fill-rule="nonzero" id="Shape"> <g transform="translate(3.000000, -2.000000)"> <path d="M2.51739501,20.1380463 L22.6548842,20.1380463 C24.045578,20.1380463 25.1722792,19.010788 25.1722792,17.6206512 C25.1722792,16.2305145 24.045578,15.1038131 22.6548842,15.1038131 L2.51739501,15.1038131 C1.13115695,15.1138381 0.0100250244,16.2349701 0,17.6206512 C0.00389862772,19.0091171 1.12892917,20.1335907 2.51739501,20.1380463 Z" fill="#41769E"> </path> <path d="M37.7586974,55.3793485 C37.762596,56.7678144 38.8876265,57.8922879 40.2755355,57.8961866 L60.4135816,57.8961866 C61.7998196,57.8861616 62.9209516,56.7650296 62.9309766,55.3793485 C62.9270779,53.9908826 61.8020476,52.866409 60.4135816,52.8619535 L40.2755355,52.8619535 C38.8870696,52.866409 37.762596,53.9908826 37.7586974,55.3793485 Z" fill="#41769E"> </path> <path d="M31.4652098,49.086418 C32.8542327,49.0819624 33.9787062,47.9574888 33.9826048,46.569023 L33.9826048,26.4309767 C33.9725799,25.0452956 32.8514479,23.9241637 31.4652098,23.9135817 C30.076744,23.9180373 28.9522704,25.0425109 28.9483717,26.4309767 L28.9483717,46.569023 C28.9522704,47.9574888 30.076744,49.0819624 31.4652098,49.086418 Z" fill="#41769E"> </path> <polygon fill="#5AAAE7" points="2.51739501 0 12.5858612 0 12.5858612 15.1032562 2.51739501 15.1032562"> </polygon> <polygon fill="#78B9EB" points="12.5858612 0 22.6548842 0 22.6548842 15.1032562 12.5858612 15.1032562"> </polygon> <polygon fill="#5AAAE7" points="40.2755355 57.8967435 50.3445584 57.8967435 50.3445584 72.9999997 40.2755355 72.9999997"> </polygon> <polygon fill="#78B9EB" points="50.3445584 57.8967435 60.4135816 57.8967435 60.4135816 72.9999997 50.3445584 72.9999997"> </polygon> <path d="M40.2755355,37.7586974 L33.9826048,37.7586974 L33.9826048,46.569023 L37.7586974,46.569023 C39.1488341,46.569023 40.2755355,47.6957244 40.2755355,49.086418 L40.2755355,52.8619535 L50.3445584,52.8619535 L50.3445584,47.8277205 C50.3445584,42.2666166 45.8366392,37.7586974 40.2755355,37.7586974 Z" fill="#5AAAE7"> </path> <path d="M60.4135816,41.534233 C60.4135816,33.1928558 53.6517027,26.4309767 45.3103255,26.4309767 L33.9826048,26.4309767 L33.9826048,37.7586974 L40.2755355,37.7586974 C45.8366392,37.7586974 50.3445584,42.2666166 50.3445584,47.8277205 L50.3445584,52.8619535 L60.4135816,52.8619535 L60.4135816,41.534233 Z" fill="#78B9EB"> </path> <path d="M25.1722792,26.4309767 C23.7821425,26.4309767 22.6548842,25.3042753 22.6548842,23.9135817 L22.6548842,20.1380463 L12.5864181,20.1380463 L12.5864181,27.6896742 C12.5864181,33.2507781 17.0943374,37.7586974 22.6548842,37.7586974 L28.9483717,37.7586974 L28.9483717,26.4309767 L25.1722792,26.4309767 Z" fill="#78B9EB"> </path> <path d="M12.5858612,27.6896742 L12.5858612,20.1380463 L2.51739501,20.1380463 L2.51739501,31.4657667 C2.51739501,39.8071439 9.27927391,46.569023 17.6206512,46.569023 L28.9483717,46.569023 L28.9483717,37.7586974 L22.6548842,37.7586974 C17.0943374,37.7586974 12.5858612,33.2507781 12.5858612,27.6896742 Z" fill="#5AAAE7"> </path> </g> </g> </g> </g> </g> </svg>
Upload
Copy
Download
Share
Preview
React
React Native
PNG
Data URI
progressive-webapps/rendering-performance/the-pixel-pipeline
Created with Sketch.
100%
Download SVG