🚀 Days 11–15 – Pro Skills & Projects · Day 12
Day 12: SVG, Canvas & iframes
⏱ 85 min📶 Intermediate🎯 100% self-study
Day 12 / 15
✅ Today you will learn
- Inline SVG: shapes, paths, text and icons
- SVG vs PNG/WebP – when to use which
- canvas: drawing pixels with a little JS
- iframe: Google Maps, YouTube, safely
- Performance and security for embeds
🏢 In the real world
The shop needs a crisp logo that looks perfect on a 4K screen and a tiny phone, small icons for delivery/phone/location, a mini chart of festival sales for the “About” page, a map so customers find Johari Bazaar, and the shop’s YouTube recipe video.
SVG: graphics written as code
HTML
<svg width="300" height="120" viewBox="0 0 300 120" role="img" aria-labelledby="lt"> <title id="lt">Sharma Sweets logo</title> <circle cx="60" cy="60" r="50" fill="#e34f26"/> <circle cx="60" cy="60" r="34" fill="#f59e0b"/> <path d="M42 66 q18 -30 36 0" stroke="#fff" stroke-width="6" fill="none" stroke-linecap="round"/> <text x="125" y="56" font-family="Georgia" font-size="26" fill="#9a3412">Sharma</text> <text x="125" y="88" font-family="Georgia" font-size="22" fill="#e34f26">Sweets · 1985</text> </svg>
| SVG element | Draws |
|---|---|
| <rect x y width height rx> | Rectangles (rx = rounded corners) |
| <circle cx cy r> | Circles |
| <line>, <polyline>, <polygon> | Lines and multi-point shapes |
| <path d="…"> | Any shape: M move, L line, Q/C curves, Z close |
| <text> | Real, selectable text |
| viewBox | The internal coordinate system – makes it scale |
icons
HTML
<style>a{display:inline-flex;align-items:center;gap:6px;margin:6px 10px;color:#9a3412;font-family:system-ui;text-decoration:none}
a:hover{color:#e34f26} svg{width:22px;height:22px}</style>
<a href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z"/></svg>Call</a>
<a href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z"/></svg>Find us</a>
<a href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M3 6h11v9H3zM14 9h4l3 3v3h-7zM6.5 18.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm11 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg>Delivery</a>SVG (vector)
- Logos, icons, charts, illustrations
- Sharp at any size
- Tiny file, editable, styleable with CSS
- Text inside stays searchable
WebP/JPG/PNG (raster)
- Photos of sweets, people, shop
- Blurry when enlarged
- Use srcset for sizes (Day 4)
- WebP for best compression
canvas: a drawing board for JavaScript
HTML
<canvas id="c" width="320" height="170" style="border:1px solid #eee">Festival sales: Diwali 420 kg, Holi 180 kg, Rakhi 260 kg, Teej 150 kg.</canvas>
<script>
var ctx = c.getContext('2d');
var data = [['Diwali', 420], ['Holi', 180], ['Rakhi', 260], ['Teej', 150]];
ctx.font = '12px system-ui';
data.forEach(function (d, i) {
var h = d[1] / 3.5, x = 25 + i * 75;
ctx.fillStyle = i === 0 ? '#e34f26' : '#f59e0b';
ctx.fillRect(x, 150 - h, 45, h);
ctx.fillStyle = '#333';
ctx.fillText(d[0], x, 165);
ctx.fillText(d[1] + ' kg', x + 2, 145 - h);
});
</script>🧠 SVG or canvas?
SVG keeps every shape as an element (clickable, accessible, crisp) – best for logos, icons and simple charts. Canvas is just pixels – best for games, image editing and thousands of moving points. Put fallback text inside <canvas> for screen readers.
iframe: a window to another website
HTML – Google Maps and YouTube embeds
<!-- Google Maps: Share → Embed a map → copy HTML --> <iframe src="https://www.google.com/maps?q=Johari+Bazaar+Jaipur&output=embed" width="600" height="400" style="border:0" title="Map: Sharma Sweets, Johari Bazaar, Jaipur" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe> <!-- YouTube: Share → Embed. youtube-nocookie = privacy-enhanced mode --> <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" width="560" height="315" title="How we make ghewar – Sharma Sweets" loading="lazy" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
HTML
<iframe title="Order card from another page" loading="lazy" sandbox
style="border:2px dashed #f59e0b;width:100%;height:110px"
srcdoc="<h3 style='font-family:system-ui;color:#9a3412'>Order card</h3><p style='font-family:system-ui'>I live in a separate, sandboxed document.</p><script>document.write('scripts are blocked')</script>"></iframe>| Attribute | Why |
|---|---|
| title | Required for accessibility – describes the embed |
| loading="lazy" | Loads only when scrolled near – faster page |
| sandbox | Blocks scripts, forms, popups unless you allow them (allow-scripts…) |
| allow | Grants features like fullscreen, camera, autoplay |
| referrerpolicy | Controls what URL info is sent to the embedded site |
⚠️ Not every site can be framed
Banks, Google Search, Facebook and many others send X-Frame-Options / CSP headers that block iframes. Only embed pages that provide an official embed code.
🏅 Job skills unlocked today
✔ Draw logos and icons with inline SVG✔ Choose between SVG and raster images✔ Paint simple graphics on canvas✔ Embed maps and videos safely with iframe
Practice tasks
🏋️ Practice – do it yourself
Task 1: Draw a “FRESH TODAY” circular badge in SVG (circle, inner circle, text).
Show solution
HTML
<svg width="140" height="140" viewBox="0 0 140 140" role="img" aria-label="Fresh today badge"> <circle cx="70" cy="70" r="65" fill="#16a34a"/> <circle cx="70" cy="70" r="52" fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="6 4"/> <text x="70" y="66" text-anchor="middle" font-family="system-ui" font-weight="700" font-size="20" fill="#fff">FRESH</text> <text x="70" y="90" text-anchor="middle" font-family="system-ui" font-size="16" fill="#fff">TODAY</text> </svg>
Task 2: Embed the Google Map of your own city’s famous market with title and loading="lazy".
Task 3: On canvas, draw a line chart of monthly kg sold: 120, 150, 130, 300, 520, 200.
Quick quiz
🧠 Quick Quiz – test yourself
1. Best format for a logo?
Vector scales without blur.
2. fill="currentColor" makes an SVG icon…
Matches surrounding text.
3. Canvas drawing needs…
getContext("2d").
4. Which iframe attribute blocks scripts in the embedded page?
Add allow-scripts to re-enable.
5. Why add title to an iframe?
Accessibility.
Interview corner
💼 Interview Corner
SVG vs canvas – when would you choose each?
SVG for resolution-independent graphics with few objects that need events, accessibility and CSS (icons, logos, maps, simple charts). Canvas for high-performance pixel work with many objects (games, particle effects, image filters), redrawn by script.
What are the security concerns with iframes?
Clickjacking (your site framed by others – prevent with X-Frame-Options/CSP frame-ancestors), and untrusted embedded content – limit with sandbox, allow and referrerpolicy, and only embed trusted sources over https.
Summary
- SVG = sharp vector graphics as code; viewBox makes them scale.
- currentColor icons follow text colour.
- canvas = JS-painted pixels; add fallback text.
- iframe embeds need title, loading="lazy" and sandbox/allow as needed.
➡️ Next
Day 13: professional habits – validation, DevTools, folder structure, performance and putting your site live for free.
Frequently Asked Questions
Where do I get free SVG icons?
Open-source sets like Heroicons, Feather, Lucide and Bootstrap Icons – check their licence (most are MIT).
Do embeds slow my site?
Yes, a YouTube embed can add ~1 MB. Use loading="lazy" or show a thumbnail that loads the player on click.
