0

0

SVG文件怎么创建 SVG基础XML代码入门教程

煙雲

煙雲

发布时间:2025-12-17 00:35:14

|

812人浏览过

|

来源于php中文网

原创

svg文件是用xml语法编写的文本文件,可直接用记事本创建并保存为.svg后缀,需以声明开头、为根元素并设宽高,内部用等标签绘图,utf-8编码确保中文正常显示。

svg文件怎么创建 svg基础xml代码入门教程

SVG文件本质是文本文件,用XML语法描述图形,直接用记事本就能写,不需要专业软件。

SVG文件怎么创建

新建一个纯文本文件,把后缀名改成 .svg(比如 circle.svg),然后用任意文本编辑器(如记事本、VS Code)打开,写入标准SVG XML代码即可。浏览器能直接打开并渲染它。

  • 必须以 <?xml version="1.0" encoding="UTF-8"?> 开头(可选但推荐)
  • 根元素必须是 <svg></svg>,并指定宽高(如 width="200" height="100"
  • 内部可放 <circle></circle><rect></rect><text></text> 等图形标签
  • 保存时编码选 UTF-8,避免中文乱码

最简SVG XML代码示例

下面这段代码画一个红色圆圈,复制粘贴进文本文件,保存为 test.svg,双击就能在浏览器里看到效果:

Zeemo AI
Zeemo AI

一款专业的视频字幕制作和视频处理工具

下载
<?xml version="1.0" encoding="UTF-8"?>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="red" />
</svg>

说明:cx/cy 是圆心坐标,r 是半径,fill 是填充色。所有属性值都用英文引号包裹。

常用基础图形标签速查

  • <rect x="10" y="20" width="80" height="40" fill="#00aaff"></rect> —— 矩形(x/y 是左上角起点)
  • <line x1="0" y1="0" x2="100" y2="50" stroke="green" stroke-width="2"></line> —— 直线
  • <text x="20" y="60" font-size="16" fill="purple">Hello SVG</text> —— 文字(y 是基线位置)
  • <path d="M10 10 L90 10 L90 90 Z" fill="orange"></path> —— 路径(M=移动,L=直线,Z=闭合)

小技巧和注意事项

  • SVG支持CSS样式,也可以把 style="fill:blue;stroke:red;" 写在标签里
  • 想让图形随页面缩放,可去掉 width/height,加上 viewBox="0 0 200 200"
  • 中文文字要确保系统有对应字体,或用 font-family="sans-serif" 提高兼容性
  • 浏览器F12可查看SVG源码,是学习和调试的好方法

基本上就这些。不复杂但容易忽略编码和命名规范,写对开头和根标签,图形就出来了。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
pdf怎么转换成xml格式
pdf怎么转换成xml格式

将 pdf 转换为 xml 的方法:1. 使用在线转换器;2. 使用桌面软件(如 adobe acrobat、itext);3. 使用命令行工具(如 pdftoxml)。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1927

2024.04.01

xml怎么变成word
xml怎么变成word

步骤:1. 导入 xml 文件;2. 选择 xml 结构;3. 映射 xml 元素到 word 元素;4. 生成 word 文档。提示:确保 xml 文件结构良好,并预览 word 文档以验证转换是否成功。想了解更多xml的相关内容,可以阅读本专题下面的文章。

2100

2024.08.01

xml是什么格式的文件
xml是什么格式的文件

xml是一种纯文本格式的文件。xml指的是可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言。想了解更多相关的内容,可阅读本专题下面的相关文章。

1120

2024.11.28

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

5

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

2

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

52

2026.02.12

PostgreSQL性能优化与索引调优实战
PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

8

2026.02.12

Next.js全栈开发与SSR服务端渲染实战
Next.js全栈开发与SSR服务端渲染实战

本专题系统讲解 Next.js 框架在现代全栈开发中的应用,重点解析 SSR、SSG 与 ISR 渲染模式的原理与差异。内容涵盖路由系统、API Routes、数据获取策略、性能优化以及部署实践。通过完整项目示例,帮助开发者掌握高性能 SEO 友好的 React 全栈开发方案。

3

2026.02.12

Kotlin协程编程与Spring Boot集成实践
Kotlin协程编程与Spring Boot集成实践

本专题围绕 Kotlin 协程机制展开,深入讲解挂起函数、协程作用域、结构化并发与异常处理机制,并结合 Spring Boot 展示协程在后端开发中的实际应用。内容涵盖异步接口设计、数据库调用优化、线程资源管理以及性能调优策略,帮助开发者构建更加简洁高效的 Kotlin 后端服务架构。

39

2026.02.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.3万人学习

CSS教程
CSS教程

共754课时 | 30.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号