掌握SVG基础:从零开始学习

格栅图可以实现图片的清晰显示,但这也意味着如果要在各种设备上使用格栅图,就会增加大量不同规格的格栅图,以适应各种尺寸的设备。这也直接导致资源文件体积的增加,矢量图没有这个问题。本文将SVG代码编写与即时设计工具相结合,介绍SVG的基础知识。

什么是 SVG

SVG(Scalable Vector Graphics)它是一种图像文件格式,意思是可缩放矢量图形。它是基于XMLL的。(Extensible Markup Language),World Wide Web Consortium(W3C)该联盟正在开发中。它是一种开放的标准矢量图形语言,可以让你设计出令人兴奋、高分辨率、Web图形页面。

用户可以直接使用代码绘制图像,使用任何文本处理工具打开SVG格式图像,通过改变部分代码使图像具有交互功能,并可以随时插入HTML通过浏览器观看。

即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具,支持 Sketch、Figma、XD 格式导入,海量优质设计资源即拿即用。支持创建交互原型、获取设计标注,为产设研团队提供一站式协同办公体验。icon-default.png?t=N7T8https://js.design/?source=csdn&plan=btt065

为了直观地显示SVG代码,我将使用即时设计制作一个矩形来显示SVG代码。

在即时设计软件中制作矩形,直接导出SVG格式文件

打开导出的.SVG格式文件,您可以看到相应的SVG代码

使用矩形工具绘制的图形对应于SVG中的标签。基本标签由四个基本属性定义:矩形的起点坐标x和y、矩形的width和height

当width与height值相等时,就会画出一个正方形。

SVG是可读的,易于理解和修改的,作为内联 SVG嵌入 HTML 文档时,可以通过 CSS 或 JavaScript 操作 SVG代码。因此, SVG格式与传统 PNG、GIF 或 JPG 与图形格式相比,它更具灵活性和多功能性。

SVG的优点是什么?

SVG在应用过程中也有非常明显的优势。例如:

可扩展性和响应性

SVG使用形状、数字和坐标在浏览器中呈现图形,可以避免分辨率的影响,并具有无限的可伸缩性。SVG格式可以结合不同的形状、路径和文本元素来创造各种视觉效果,在任何尺寸下都非常清晰。相反,格栅格式(如GIF)、JPG和PNG)它们有固定的尺寸,所以它们在收缩时是像素化的。

可编程性和交互性

SVG格式可以编辑和编写脚本,所有类型的动画和交互都可以通过CSS和/或JavaScript添加到内联SVG图形中。

可访问性

SVG文件是基于文本的,所以当它嵌入到网页中时,它可以被搜索和索引。此外,还可以访问屏幕阅读器、搜索引擎和其他设备。

性能

影响网页性能的最重要因素之一是网页中使用的文件大小。SVG图形通常比位图文件格式小。

常见的 SVG实例

插图和图表

任何适合用钢笔和铅笔制作的传统绘图都应该完美地转化为 SVG格式。

标志和图标

logo和图标都是清晰锐利的。因此,SVG是logo和图标的最佳格式,SVG格式图标更容易访问和定位。

免费的SVG图标分享icon-default.png?t=N7T8https://js.design/community?category=detail&type=resource&id=65f1764f7ad3cda67792c650&source=csdn&plan=btt065

动画

您可以创建吸引人的动画,例如:

你可以使用 SVG格式图形的酷线画效果。

SVG代码可以和 CSS 动画以及 JavaScript 及其内置的 SMIL 交互动画功能。

交互性(图表、图形、信息图表、地图)

SVG可用于绘制数据,并根据用户操作或其他事件动态更新数据。

特殊效果

使用SVG可以实现许多实时效果,包括形状变形或不同的粘度效果,如带有外阴影的椭圆:

构建接口和应用程序

我们可以用SVG制作难度接口,并与HTML5、基于Web的应用程序和Internet应用程序进行合作(RIA)相结合。

支持SVG的浏览器

目前,大多数现代Web浏览器都支持SVG最重要、最基本的功能。

读到这里,我想你应该对SVG有一个初步的了解。然而,作为一名UI设计师,你仍然需要做很多实践。上述多次提到的即时设计工具是新一代的设计合作工具。它可以无缝地连接以前的工作,并支持SVG、Sketch、XD等文件的导入和导出是您进行UI创作练习的实用工具。

即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具,支持 Sketch、Figma、XD 格式导入,海量优质设计资源即拿即用。支持创建交互原型、获取设计标注,为产设研团队提供一站式协同办公体验。icon-default.png?t=N7T8https://js.design/?source=csdn&plan=btt065

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/682434.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【技巧】系统语音是英文 影刀如何设置中文-作者:【小可耐教你学影刀RPA】

写在前面 嘿哈! 有些跨境或香港的小伙伴,可能需要使用英文操作界面的影刀 该功能目前还没有现成的可视化按钮🔘 但其实这个效果可以实现~ 1、效果图 2、实现原理 %影刀安装目录%\ShadowBot-版本号\ShadowBot.Shell.dll.confi…

门面模式Api网关(SpringCloudGateway)

1. 前言 当前通过Eureka、Nacos解决了服务注册和服务发现问题,使用Spring Cloud LoadBalance解决了负载均衡的需求,同时借助OpenFeign实现了远程调用。然而,现有的微服务接口都直接对外暴露,容易被外部访问。为保障对外服务的安全…

React:Expected property name or ‘}‘ in JSON at position 1

代码&#xff1a; import { Form, Input, Button } from antd export default function FormCom() {function onFinish(a, b, c, d) {console.log(a, b, c, d)}const describe "{tip:请输入用户名}"return (<><Form onFinish{onFinish}><Form.Itemn…

Bowyer-Watson算法

数学原理及算法过程 Delaunay 三角剖分是一种特殊的三角剖分方法&#xff0c;它满足以下两个重要性质&#xff1a; 最大化最小角性质&#xff1a;Delaunay 三角剖分通过避免细长的三角形来最大化所有三角形的最小角。空外接圆性质&#xff1a;在 Delaunay 三角剖分中&#xf…

course-nlp——2-svd-nmf-topic-modeling

本文参考自https://github.com/fastai/course-nlp。 使用NMF and SVD进行主题建模 问题 主题建模是开始学习 NLP 的一种有趣方式。我们将使用两种流行的矩阵分解技术。考虑最极端的情况——使用两个向量的外积重建矩阵。显然&#xff0c;在大多数情况下&#xff0c;我们无法…

【常见报错】影刀小窗口消失-作者:【小可耐教你学影刀RPA】

现象描述&#xff1a; 影刀能够正常登录并运行&#xff0c;但是从常规模式切换到调度模式后能出现启动页&#xff0c;然后程序就退出了&#xff0c;查看影刀日志和事件查看器中的日志都没有任何异常消息 问题原因&#xff1a; 正常切换调度后会在窗口右下角出现一个机器人的小…

vue-pdf 部分中文显示错误,第二次打开是空白,解决方法

首先鸣谢 1. https://blog.csdn.net/m0_71537867/article/details/131614868?spm1001.2014.3001.5506 2. https://blog.csdn.net/weixin_43763952/article/details/133769647 3. https://github.com/FranckFreiburger/vue-pdf/issues/229 4. https://blog.csdn.net/weixin_449…

最新OpenAI免费API-openai api key获取方式

最近又开始准备LLM 应用开发&#xff0c;要用到api key&#xff0c;才发现过我之前免费发放的额度没了&#xff01;我都没咋用过&#xff0c;痛心&#x1f62d;&#x1f62d;&#x1f62d;&#xff01; 现在 OpenAI 有要求必须充值 5 刀才能使用&#xff0c;问就是没钱&#x…

思维,1209G1 - Into Blocks (easy version)

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 Problem - 1209G1 - Codeforces 二、解题报告 1、思路分析 考虑&#xff1a; 最终状态为若干段相同数字&#xff0c;且任意两段数字不同 每个数字出现的最左下标和最右下标构成一个区间 连锁反应—…

《微服务大揭秘:SpringBoot与SpringCloud的魔法组合》

加入我们的探险队伍&#xff0c;一起深入SpringBoot与SpringCloud构建的微服务世界。以轻松幽默的笔触&#xff0c;带你一步步揭开微服务架构的神秘面纱&#xff0c;从服务发现的智能地图Eureka&#xff0c;到API网关Zuul的城市门卫&#xff0c;每一个环节都充满了惊喜。不仅如…

连锁店如何通过连锁收银系统做会员营销

随着消费者对个性化、定制化服务需求的不断增长&#xff0c;会员营销已成为连锁店吸引和留住顾客的关键策略之一。而连锁收银系统作为信息管理和营销工具的核心&#xff0c;可以发挥重要作用。下面商淘云将从数据分析与个性化营销、会员积分与促销激励、跨店通用与会员互动三个…

挂上了代理加速器梯子之后,Git clone指令下载仍旧很慢的问题

当你使用了各种代理软件访问诸如Github、Google、油管、推特这些网址&#xff0c;你会发现基本可以访问&#xff0c;只不过是访问速度不同&#xff0c;但是不管你使用什么代理软件&#xff0c;你的git clone指令从Github远程库下载库的速度都不会受到影响。 当使用代理软件访问…

宝塔nginx配置

将跟php有关的注释掉&#xff1a; 添加&#xff1a; #解决vue刷新404问题try_files $uri $uri/ /index.html; location /prod-api/ {proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header…

Python Lambda函数的应用实例教程

在Python编程中&#xff0c;lambda函数是一种简洁且强大的工具&#xff0c;用于创建小型匿名函数。它们在需要快速定义简单函数时特别有用。本文将详细介绍lambda函数的语法及其多种应用实例&#xff0c;帮助读者更好地理解和使用lambda函数。 一、lambda函数的基本概念 1.1 什…

RabbitMQ支持的消息模型

RabbitMQ基础RabbitMQ支持的消息模型 一、第一种模型(直连) 我们将用Java编写两个程序&#xff0c;发送单个消息的生成者和接收消息并打印出来的消费者。 在下图&#xff0c;“P”是生成者&#xff0c;“C”消费者。中间框是一个队列RabbitMQ保留的消息缓冲区 。 首先构建一个…

win11右键二级菜单恢复成win10一级菜单

winr输入“cmd”回车&#xff0c;打开cmd窗口&#xff0c;输入如下命令&#xff0c;并回车。reg add "HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32" /f /ve提示cuccessfully&#xff0c;表示操作成功。重启电脑即可。 如下…

测试记录3:WLS2运行Linux界面

1.WLS1转到WLS2 &#xff08;1&#xff09;根据自己的平台&#xff0c;下载WLS2安装包 x64: https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi arm64: https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_arm64.msi &#xff08;2&…

《2024年网络安全预测:未来规划深度洞察》

2024 年打击网络对手的计划。 阅读报告&#xff0c;了解我们的专家对 2024 年网络安全行业的预测&#xff0c;包括&#xff1a; 攻击者将人工智能融入其行动中&#xff0c;防御者利用它来加强检测和响应 民族国家继续开展网络行动以实现其地缘政治目标 攻击者继续利用零日漏洞…

word 无法自动检测拼写

word 有时候不能分辨是哪种语言,比如把英语错认为法语 。 例如&#xff1a;Interlaayer spacace,发现误认为是法语。 1、选中Interlaayer spacace 2、点击语言下拉按钮 选择设置校对语言 发现校对语言为法语 3、手动修改校对语言为英语&#xff0c;并点击确认。 4、发现现…

【ARM Cache 及 MMU 系列文章 6.1 -- Cache maintenance 相关寄存器及指令详细介绍】

请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 文章目录 Cache Maintenance registers and instructionsDCZID_EL0DCZID_EL0寄存器字段解释 DCZ 使用场景Cache maintenance 范围选择 Cache maintenance 指令集 Cache Maintenance registers a…