正在加载...

HTML SVG

上一课 小项目 要求交付小型个人站。本课开始可选图形轨道。SVG 让 HTML 用数学而非像素绘制清晰图标与形状。范围务实：如何把 SVG 放到页面上——不是完整设计课。

为何在 HTML 课学 SVG

位图放大易糊。SVG 描述路径与形状——标志保持清晰。初学者把 SVG 当作页眉图标或徽章。弄清内联与文件可让页面轻量且可访问。

直接回答

1) 内联：把 svg 树放进 HTML。2) 文件：保存 .svg 并用 img+alt 加载。3) 需要 CSS/JS 挂钩或精确命名时优先内联。4) 静态标志优先 img。5) 为有意义的图形命名。6) 本课只讲嵌入。

📊 SVG embedding beginners use

Choice What it does Beginner tip
Inline svg Shapes live in the HTML tree Easy to style and label in-page
img to .svg Treats SVG like an image file Simple for static logos
viewBox Maps SVG coords to the viewport Keep width/height + viewBox aligned
Accessible name alt or aria-label on meaningful art Empty name only if truly decorative
Scales cleanly Vectors stay sharp when resized Great for icons and UI marks
Not a photo format Photos stay JPEG/PNG/WebP Use SVG for shapes/icons, not camera shots

微型内联 SVG

内联 SVG 就是标记。带 viewBox 与可访问名称的圆展示 HTML 职责：浏览器绘制；你控制尺寸与含义。

Tiny inline SVG circle

html 
<svg width="80" height="80" viewBox="0 0 80 80" role="img" aria-label="Green circle">
<circle cx="40" cy="40" r="32" fill="#2a7"></circle>
</svg>

阅读内联演示

  • svg 是根
  • width/height 布局盒；viewBox 坐标系
  • circle 是子形状
  • role=img 加 aria-label 命名图形
  • 改尺寸仍清晰
  • 小项目用 img 放照片；这里「图」可以是标记

作为图像文件的 SVG

若已有 logo.svg，像媒体一样处理：src 与有用的 alt。路径须匹配文件夹。

SVG as an image file

html 
<img src="images/logo.svg" alt="Site logo" width="120">

阅读文件模式

  • src 指向 .svg
  • alt 携带可访问名称
  • width 控制布局尺寸；矢量仍干净缩放
  • CSS 更易样式化 img 盒，不如内联改每条路径方便
  • 多页复用同一文件
  • 下一课 canvas 用 JS 像素绘制——不同工具

选择内联还是文件

  • 要用 CSS 上色的图标：常选内联
  • 多页静态品牌标志：img
  • 相机照片：位图格式
  • 巨大内联插画：优先文件
  • 有意义的图形：务必命名
  • 深层 SVG 创作：后续路径

练习 — 页面上的 SVG

  1. 粘贴圆并确认渲染。
  2. 改 width/height——仍应清晰。
  3. 用 img+alt 加载 .svg。
  4. 暂时去掉 aria-label/alt。
  5. 在小项目首页副本标题旁加内联图标。
  6. 一句话：SVG 是可缩放标记或矢量文件——不是照片替代。
  7. 预告：canvas 用脚本绘制。

易错点

  • 有意义的 SVG 忘记可访问名称
  • 粘贴巨大内联 SVG 树
  • 用 SVG 当照片
  • 省略 viewBox
  • 把 SVG 与 canvas 混淆
  • 把入门当完整插画课
  • 丢掉小项目的无访问习惯

小结

  • SVG 绘制与分辨率无关的形状与图标
  • 用 svg 内联或用 img 加载 .svg
  • 为有意义的图形命名
  • 矢量可缩放；照片仍用位图
  • 小项目是建站；本课开始可选图形
  • 下一课：HTML canvas

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
5
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 61 的 68
Html 教程