1. A Very Brief, and Mildly Snarky, History of SVG
SVG (Scalable Vector Graphics) came to life in 1999 because the web needed crisp graphics that wouldn’t pixelate like an 8-bit video game when zoomed. XML-based and vector-friendly,
SVG lets you create everything from logos to interactive infographics without worrying about resolution.
Meanwhile, in the PostScript World…
PostScript, invented by Adobe in the 80s, was the cool kid in print graphics.
It’s powerful, but as user-friendly as a porcupine in a balloon factory. Unlike SVG, PostScript is designed for printers, not browsers.
Other Competitors in the Ring:
- PNG/JPEG: Pixel-based, like Minecraft but less fun.
- PDF: PostScript’s younger sibling who grew up to be more web-friendly.
- WebP: Google’s attempt to make web graphics fast but confuse everyone about when to use it.
2. SVG vs PostScript vs the Rest - Key Differences
| Feature | SVG | PostScript | PNG/JPEG | PDF |
|---|
| Type | Vector (XML-based) | Vector (Code-based) | Raster (Pixels) | Vector/Raster |
| Browser Support | Excellent (native) | None | Excellent | Limited |
| Interactivity | High (JS, CSS animations) | None | None | Minimal |
| Editable | Easily in text editor | Programmers only | Not editable | Harder |
3. SVG Code Examples
We’ll use Python’s svgwrite library to create SVG magic. Install it with:
1. Basic Circle
1
2
3
4
5
6
| import svgwrite
dw = svgwrite.Drawing('circle.svg', profile='tiny')
dw.add(dw.circle(center=(100, 100), r=50, fill='blue'))
dw.save()
print("Blue circle created. Picasso would be jealous.")
|
2. Rectangle (Because We Love Boxes)
1
2
3
4
| dw = svgwrite.Drawing('rectangle.svg', profile='tiny')
dw.add(dw.rect(insert=(10, 10), size=(200, 100), fill='green'))
dw.save()
print("Rectangle added. Boxes are life.")
|
3. Line (The Simplest Art)
1
2
3
4
| dw = svgwrite.Drawing('line.svg', profile='tiny')
dw.add(dw.line(start=(0, 0), end=(200, 200), stroke='red'))
dw.save()
print("Straight line? Straight fire!")
|
4. Text (Because Words Matter)
1
2
3
4
| dw = svgwrite.Drawing('text.svg', profile='tiny')
dw.add(dw.text('Hello SVG!', insert=(10, 50), fill='purple'))
dw.save()
print("Text SVG created. Shakespeare who?")
|
5. Polygon (For When Squares Are Too Mainstream)
1
2
3
4
| dw = svgwrite.Drawing('polygon.svg', profile='tiny')
dw.add(dw.polygon(points=[(100, 100), (150, 200), (200, 100)], fill='orange'))
dw.save()
print("Polygon? More like poly-fun!")
|
6. Ellipse (Ovals Are Just Stretchy Circles)
1
2
3
4
| dw = svgwrite.Drawing('ellipse.svg', profile='tiny')
dw.add(dw.ellipse(center=(100, 100), r=(80, 40), fill='pink'))
dw.save()
print("Ellipse drawn. Stretch that circle!")
|
7. Gradient (Because Why Not?)
1
2
3
4
5
6
7
8
| dw = svgwrite.Drawing('gradient.svg', profile='tiny')
grad = dw.linearGradient(start=(0, 0), end=(0, 1), id='grad')
grad.add_stop_color(offset='0%', color='yellow')
grad.add_stop_color(offset='100%', color='red')
dw.defs.add(grad)
dw.add(dw.rect(insert=(0, 0), size=(200, 100), fill='url(#grad)'))
dw.save()
print("Gradient magic completed.")
|
8. Grouping Elements
1
2
3
4
5
6
7
| dw = svgwrite.Drawing('group.svg', profile='tiny')
group = dw.g(id='shapes')
group.add(dw.circle(center=(50, 50), r=40, fill='cyan'))
group.add(dw.rect(insert=(100, 50), size=(100, 50), fill='magenta'))
dw.add(group)
dw.save()
print("Group therapy for shapes completed.")
|
9. Path Drawing (Artistic Freedom)
1
2
3
4
5
| dw = svgwrite.Drawing('path.svg', profile='tiny')
path = dw.path(d='M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80', stroke='black', fill='none')
dw.add(path)
dw.save()
print("Abstract art made easy.")
|
10. Responsive SVG
1
2
3
4
| dw = svgwrite.Drawing('responsive.svg', size=('100%', '100%'))
dw.add(dw.circle(center=('50%', '50%'), r='20%', fill='lime'))
dw.save()
print("SVG is now responsive. Mobile-friendly shapes FTW!")
|
4. So… SVG or PostScript?
- SVG: Best for web, scalable, interactive, and easy to read.
- PostScript: Great for print but dated for modern web use.
- PNG/JPEG: Perfect for photos but terrible for crisp logos.
- PDF: Awesome for documents; meh for interactive graphics.
5. Key Ideas Summary
| Idea | Description |
|---|
| SVG Origins | Born in 1999 to solve web graphics scalability issues. |
| PostScript Overview | Print-centric, older, less web-friendly. |
| Python Examples | Created SVGs with svgwrite - circles, text, paths, etc. |
| Comparisons | SVG beats PostScript for web but not for print. |
| Use Cases | SVG: Web & interactive; PostScript: Printing; PNG: Photos. |
6. References
