Unlock our premium graphics

» Use Unlimited Graphics

» In Unlimited Projects

» For 1 Designer

» No Attribution Required

Search results for svg



SVG collections related to svg

SVG Shapes: Geometric

pinwheel shape made of half circles over green backgroundstar shape made of rectangles over green backgroundleaf shape made of quarter circles over green backgroundcircle shape made of intersecting circles over green backgroundclover shape made of circles and cones over green background

240

Shapes

SVG Shape Dividers

Waves section dividerJagged step section dividertriangle layers section dividerfancy pyramid section dividerwavy flag section divider

120

Dividers

SVG Quotation Marks for HTML Blockquotes

open quotation mark square and roundopen quotation mark ear pod headphonesopen quotation mark organic elegantopen quotation mark modern sharpopen quotation mark tear drops

176

Symbols

Animated SVG Preloaders

spinning loading animation fading dots in circlemotion line making infinite symbolball in motion to right animationspinning gears animationspinning light around circle tube animation

24

Preloaders

SVG Circle Doodles

svg double circlesingle perfect ovalscribble circlesdouble ovalthought bubble hand drawn

45

Doodles

SVG List Item Bullets

Dual chevrons iconeight sided stargear iconsvg bullet iconsvg heart icon

60

Icons

Free SVG Backgrounds and Patterns

Layers of light yellow fading into a darker yellow background thumborange repeating pattern of alternating raised tilesWinter sky blue sunburst background vectorrepeating triangle pattern over sky blue gradientpurple target circles

48

Backgrounds

Triple Threat SVG Icons

Folder iconImage iconmap iconticket iconemail icon

900

Icons

Animated SVG Backgrounds

green rave light effect animated backgroundpink circles in circles pulsating backgroundaperture style background animated to openblue colors that transform in a fanning motionalternating stripes that get larger and smaller in a ripple pattern

21

Backgrounds

SVG Geometric Doodles

hand-drawn star outline doodlehand-drawn spiral outline doodlehand-drawn diamond outline doodlehand-drawn rainbow outline doodlehand-drawn squiggle outline doodle

132

Doodles

Plump SVG Icons

Musical note iconwifi iconcloud iconcolor palette iconpaw print icon

204

Icons

SVG Arrow Doodles

twisting arrowpointy arrow headthree trailing lines arrowoutlined wavy arrowArrow sketch, as in bow and arrow

64

Doodles

SVG Underline doodles

hand-drawn underline waveshand-drawn underline marker zigzaghand-drawn underline scribblehand-drawn underline smilehand-drawn underline cross out

48

Doodles

Duo-tone SVG Icons

umbrella iconstar iconjewel iconBookmark iconflame icon

150

Icons

Simple SVG Blob Shapes

starfish blobslice of bread looking blobdiamond shaped blobStorm trooper Helmet looking blobjelly bean silhouette blob

36

Blobs

Custom CSS Cursors

Hand pointer iconarrow cursor iconarrow head cursor icontarget and scope iconcolor picker icon

60

Cursors

Depth and Shadows

green layered rings within ringsinfinitely smaller square cutouts within square cutouts3d aperture backgroundpurple 3d groove straight lines designpurple 3d grooves in circular rings

10

Backgrounds

Alternating Geometric Patterns

light purple and white alternating triangle patterntriangles in pinwheel patternpurple and white alternating triangle halves patternpurple alternating triangle patternwhite and purple long diamond shape pattern

20

Backgrounds



Backgrounds related to svg

Layers of light yellow fading into a darker yellow background thumb


Posts and tutorials related to svg

How to make animated loading graphics with only SVG

We’re going to create animated preloaders with SVG and nothing else. No CSS or JS is required. Once you know the basics, it’s easy to make variations.

We’re going to create animated preloaders with SVG and nothing else. No CSS or JS is required. Once you know the basics, it’s easy to make variations.

3 ways to use SVG blobs on your website (CSS)

We're going to demo three practical ways to use SVG blobs in your website design with CSS: as a background, shape divider, and a mask.

We're going to demo three practical ways to use SVG blobs in your website design with CSS: as a background, shape divider, and a mask.

How to create SVG Blobs

You can use a SVG generator to create simple blobs. However, if you want more control, use a vector design program, let's learn how.

You can use a SVG generator to create simple blobs. However, if you want more control, use a vector design program, let's learn how.

SVG basics: Styling shape elements

We will breakdown a few foundational attributes you can use to change the appearance of SVG shape elements: fill, stroke, and opacity.

We will breakdown a few foundational attributes you can use to change the appearance of SVG shape elements: fill, stroke, and opacity.

SVG basics: drawing circles and ovals

Learn the basics of the CIRCLE and ELLIPSE elements in SVG. We dissect their similarities and differences and how to style these circular SVG elements.

Learn the basics of the CIRCLE and ELLIPSE elements in SVG. We dissect their similarities and differences and how to style these circular SVG elements.

How to Add SVG Backgrounds in GIMP

In this quick tutorial, we’ll show how to get and apply SVG Backgrounds in GIMP. As well as cover when and why you would want to use SVGs instead of JPGs.

In this quick tutorial, we’ll show how to get and apply SVG Backgrounds in GIMP. As well as cover when and why you would want to use SVGs instead of JPGs.

CSS can’t animate gradients, but SVG can

Want to animate gradients for your website, but sad that CSS can’t help? Well it’s time to learn about SVG gradients and how to animate them.

The ultimate guide to creating SVG patterns for websites

Learn how to design SVG patterns by identifying patterns, making pattern tiles, designing and coding patterns, and applying patterns with CSS.

Learn how to design SVG patterns by identifying patterns, making pattern tiles, designing and coding patterns, and applying patterns with CSS.

How to add SVG Backgrounds in Canva

In this video and written tutorial, we'll demonstrate how to get and apply SVG Backgrounds in the Canva editor.

In this video and written tutorial, we'll demonstrate how to get and apply SVG Backgrounds in the Canva editor.

How to add SVG Backgrounds in Webflow

This is a tutorial on how to get SVG backgrounds working in Webflow. There are two methods SVG uploads and CSS (if you have a paid version of Webflow)

This is a tutorial on how to get SVG backgrounds working in Webflow. There are two methods SVG uploads and CSS (if you have a paid version of Webflow)

How to add SVG backgrounds into the Gutenberg editor

Learn how to add backgrounds to Gutenberg blocks using the magic of CSS classes. You don't need to know how to code for this beginner's tutorial.

Learn how to add backgrounds to Gutenberg blocks using the magic of CSS classes. You don't need to know how to code for this beginner's tutorial.

How to add SVG backgrounds to WordPress

I'll show you the easiest way to add an SVG background to your WordPress website, whether you use a pagebuilder, built your own custom themes, or use Gutenberg.

I'll show you the easiest way to add an SVG background to your WordPress website, whether you use a pagebuilder, built your own custom themes, or use Gutenberg.

How to add SVG backgrounds to WordPress pagebuilders

I will break down how to add an SVG background to your designs on the most popular pagebuilders on WordPress, which all use a similar approach.

I will break down how to add an SVG background to your designs on the most popular pagebuilders on WordPress, which all use a similar approach.

How to add SVG backgrounds to Elementor

I'll show you by video and written tutorial how to get SVG Backgrounds on any Elementor section, column, or widget, whether or not you're comfortable with CSS.

I'll show you by video and written tutorial how to get SVG Backgrounds on any Elementor section, column, or widget, whether or not you're comfortable with CSS.

How to add SVG backgrounds to Adobe Illustrator

How do you import SVG into Adobe Illustrator? While you can open an SVG file in Illustrator, it is easier and faster to copy and paste the SVG code.

How do you import SVG into Adobe Illustrator? While you can open an SVG file in Illustrator, it is easier and faster to copy and paste the SVG code.

How to add SVG backgrounds to HTML

We are going to learn how to add an SVG background into HTML as an inline SVG. This method allows us to manipulate the SVG via CSS or JS.

We are going to learn how to add an SVG background into HTML as an inline SVG. This method allows us to manipulate the SVG via CSS or JS.

Free SVG Generators

Discover our favorite free SVG generators on the web to handle the time-consuming task of creating patterns, textures, blobs, illustrations, and more.

Discover our favorite free SVG generators on the web to handle the time-consuming task of creating patterns, textures, blobs, illustrations, and more.

3 ways SVG can help websites look less blocky

Web design is built on the CSS box model, which causes default content to be constrained by rectangular design. SVGs can help you think outside of the box .

Web design is built on the CSS box model, which causes default content to be constrained by rectangular design. SVGs can help you think outside of the box .

How to add an SVG to WordPress without a plugin

The WP media library doesn’t allow SVG file uploads by default, due to security concerns. Let’s take a look at the various methods to display SVG on WordPress.

The WP media library doesn’t allow SVG file uploads by default, due to security concerns. Let’s take a look at the various methods to display SVG on WordPress.

How to add SVGs with CSS (background-image)

Let's look at how to add SVGs into the CSS property background-image and how the related background properties can transform the results.

Let's look at how to add SVGs into the CSS property background-image and how the related background properties can transform the results.

How to optimize and reduce the file size of SVG images

I’m going to break down every possible way and a handful of tools to help you shed bytes from your SVG, so you can keep your website load times fast.

I’m going to break down every possible way and a handful of tools to help you shed bytes from your SVG, so you can keep your website load times fast.

SVGBG Changelog

SVG Backgrounds launched in early 2018 and has been incrementally improved over the years. This page tracks the improvements and growing collection.

Shape Dividers: Basic CSS

I made a video on how to add shape dividers to websites with SVG shape dividers and CSS. This is the code used in the video.

Triple Threat Icons Documentation

Triple Threat Icons uses SVG and CSS magic to create multi-state website icons, where these icons can have a regular, hover, and selected state.

Creating vector doodles by drawing on paper

Explore the first of a three-part series, mastering the creation of organic, textured vector doodles from your hand-drawn sketches.

Explore the first of a three-part series, mastering the creation of organic, textured vector doodles from your hand-drawn sketches.

Data URIs are a wildly underused website speed optimization

Using SVG Data URIs reduces HTTP requests, boosts load speed, allows for dynamic SVG manipulation, and provides advantages to your web development workflow,

Using SVG Data URIs reduces HTTP requests, boosts load speed, allows for dynamic SVG manipulation, and provides advantages to your web development workflow,

Custom CSS Bullets with ::marker

It's easy to add a custom SVG bullet, declare list-style-image: with your image and you're 80% done. The challenge is in making size and position adjustments.

It's easy to add a custom SVG bullet, declare list-style-image: with your image and you're 80% done. The challenge is in making size and position adjustments.

Is SMIL dead in 2022? Nope

Fast-forward to 2022 and the only browsers that don’t support SMIL are Internet Explorer (officially retired) and Opera Mini. Does that mean SMIL is alive?

Fast-forward to 2022 and the only browsers that don’t support SMIL are Internet Explorer (officially retired) and Opera Mini. Does that mean SMIL is alive?

14 pieces of bad advice aspiring entrepreneurs should ignore

The worst advice given to aspiring entrepreneurs slows down progress, wastes time, and leads them astray. Here are 14 misguided pieces of advice to avoid.

The worst advice given to aspiring entrepreneurs slows down progress, wastes time, and leads them astray. Here are 14 misguided pieces of advice to avoid.

How I arrived at my perfect business idea

Hint: I didn’t come up with the idea out of the blue. Let’s track down the key moments of my journey, leading to the moment I noticed an opportunity.

Hint: I didn’t come up with the idea out of the blue. Let’s track down the key moments of my journey, leading to the moment I noticed an opportunity.

The fastest icons in the Wild Wild Web

In this article, I’m going to show you the fastest way to integrate icons into your web projects. Hint, it’s literally click and paste.

In this article, I’m going to show you the fastest way to integrate icons into your web projects. Hint, it’s literally click and paste.

Why our design assets are priced as a subscription service

The subscription model works because the backgrounds aren't typical downloadable assets. We're a service that makes iterating webpage design quick and easy.

The subscription model works because the backgrounds aren't typical downloadable assets. We're a service that makes iterating webpage design quick and easy.
Matt Visiwig Headshot

Hey, I'm Matt , the creator behind SVG Backgrounds. I produce free and paid resources every month, sign up for alerts.


Get freebies See latest releases