Sample SVG Files — Scalable Vector Graphics for Testing

Download free sample SVG files — icons, logos, illustrations, charts, maps, animations, and patterns. From 1KB simple shapes to 500KB complex illustrations.

Generate custom SVG fileCreate up to 1GB locally in your browser

SVG

sample-simple.svg

117 B

Download

Verified file details

Filename: sample-simple.svg
Exact size: 117 bytes
Displayed size: 117 B
MIME type: image/svg+xml
License: CC0 / Public Domain
Download URL: https://truefilesize.com/files/svg/sample-simple.svg

SVG

sample-icon.svg

166 B

24×24

Download

Verified file details

Filename: sample-icon.svg
Exact size: 166 bytes
Displayed size: 166 B
MIME type: image/svg+xml
Dimensions: 24 x 24 px
License: CC0 / Public Domain
Download URL: https://truefilesize.com/files/svg/sample-icon.svg

SVG

sample-logo.svg

263 B

Download

Verified file details

Filename: sample-logo.svg
Exact size: 263 bytes
Displayed size: 263 B
MIME type: image/svg+xml
License: CC0 / Public Domain
Download URL: https://truefilesize.com/files/svg/sample-logo.svg

SVG

sample-illustration.svg

6.5 KB

Download

Verified file details

Filename: sample-illustration.svg
Exact size: 6,639 bytes
Displayed size: 6.5 KB
MIME type: image/svg+xml
License: CC0 / Public Domain
Download URL: https://truefilesize.com/files/svg/sample-illustration.svg

SVG

sample-chart.svg

377 B

800×500

Download

Verified file details

Filename: sample-chart.svg
Exact size: 377 bytes
Displayed size: 377 B
MIME type: image/svg+xml
Dimensions: 800 x 500 px
License: CC0 / Public Domain
Download URL: https://truefilesize.com/files/svg/sample-chart.svg

SVG

sample-map.svg

2.9 KB

Download

Verified file details

Filename: sample-map.svg
Exact size: 2,991 bytes
Displayed size: 2.9 KB
MIME type: image/svg+xml
License: CC0 / Public Domain
Download URL: https://truefilesize.com/files/svg/sample-map.svg

SVG

sample-animated.svg

205 B

Download

Verified file details

Filename: sample-animated.svg
Exact size: 205 bytes
Displayed size: 205 B
MIME type: image/svg+xml
License: CC0 / Public Domain
Download URL: https://truefilesize.com/files/svg/sample-animated.svg

SVG

sample-text.svg

300 B

Download

Verified file details

Filename: sample-text.svg
Exact size: 300 bytes
Displayed size: 300 B
MIME type: image/svg+xml
License: CC0 / Public Domain
Download URL: https://truefilesize.com/files/svg/sample-text.svg

SVG

sample-gradient.svg

250 B

400×300

Download

Verified file details

Filename: sample-gradient.svg
Exact size: 250 bytes
Displayed size: 250 B
MIME type: image/svg+xml
Dimensions: 400 x 300 px
License: CC0 / Public Domain
Download URL: https://truefilesize.com/files/svg/sample-gradient.svg

SVG

sample-pattern.svg

253 B

Download

Verified file details

Filename: sample-pattern.svg
Exact size: 253 bytes
Displayed size: 253 B
MIME type: image/svg+xml
License: CC0 / Public Domain
Download URL: https://truefilesize.com/files/svg/sample-pattern.svg

SVG

sample-large.svg

309 KB

Download

Verified file details

Filename: sample-large.svg
Exact size: 316,488 bytes
Displayed size: 309 KB
MIME type: image/svg+xml
License: CC0 / Public Domain
Download URL: https://truefilesize.com/files/svg/sample-large.svg

What are SVG files used for?

Website logos and icons (sharp at any size)
Data visualization — charts, graphs, diagrams
Illustrations and artwork for web
UI icons in design systems (Heroicons, Feather, etc.)
Animations with CSS or JavaScript

Advantages of SVG over PNG/JPG

Strengths

+Resolution-independent — perfect on retina/4K displays
+Smaller file size for simple graphics
+Can be styled with CSS
+Can be animated with CSS or JS
+Inline in HTML — no extra HTTP request

Limitations

-Not suitable for photographs
-Complex SVGs can be larger than equivalent JPG
-Rendering performance degrades with many elements

How to use SVG in HTML

Method 1: <img> tag — simple but limited styling

<img src="logo.svg" alt="Logo" width="200">

Method 2: Inline SVG — full CSS/JS control

<svg viewBox="0 0 24 24" fill="currentColor">
  <path d="M12 2L2 22h20L12 2z" />
</svg>

Method 3: CSS background — for decorative elements

.hero { background-image: url('pattern.svg'); }

Technical specifications

Format	XML-based vector image
Scaling	Resolution-independent (infinite zoom)
Animation	CSS and SMIL supported
Browser support	All modern browsers (IE9+)
Size range	1 KB to 500 KB

Frequently Asked Questions

Can I edit SVG files with a text editor?

Yes. SVG is XML — you can open, edit, and modify it in any text editor. This is one of SVG's biggest advantages: you can change colors, sizes, and even add animations by editing the code directly.

Are SVG files safe to use on websites?

SVGs can contain embedded JavaScript, so only use SVGs from trusted sources. Our sample files contain no scripts. When accepting SVG uploads from users, sanitize them with libraries like DOMPurify to remove potential XSS vectors.

What tools create SVG files?

Adobe Illustrator, Figma, Sketch, Inkscape (free), and Affinity Designer all export SVG. For programmatic generation, use D3.js, svg.js, or server-side libraries like sharp (Node.js).

How do I optimize SVG file size?

Use SVGO (Node.js tool) to remove metadata, comments, and unnecessary attributes. It typically reduces SVG file size by 30–60% without visual changes. Online: svgomg.net.

Can SVGs be animated?

Yes. Three methods: CSS animations/transitions (easiest), SMIL animation (built into SVG spec), and JavaScript libraries (GreenSock, Anime.js). Our sample-animated.svg demonstrates CSS animation.

Other image formats

PNG JPG WebP GIF

Sample SVG Files — Scalable Vector Graphics for Testing

What are SVG files used for?

Advantages of SVG over PNG/JPG

Strengths

Limitations

How to use SVG in HTML

Technical specifications

Frequently Asked Questions

Other image formats

Related reading

Image Optimization for Web Performance

SVG vs PNG for Icons — Which Wins in 2025?

WebP vs PNG vs JPG — Which Format Should You Use?