掌握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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

五款软件推荐:U盘数据不小心删除了?帮你快速找回!

U盘数据不小心删除了怎么恢复?U盘是一种便携式存储设备,因其小巧轻便而广受欢迎。但是,U盘也常常会遇到数据丢失的问题。当U盘数据丢失时,需要找到一款可靠的数据恢复软件来恢复数据。 接下来为大家推荐5款好用的免费U盘数据恢复软…

Soildworks学习笔记(一)

1.如何添加M3,M4等螺丝孔: 有时候异形孔向导显示灰色是因为没有退出草图选项卡,选择异形孔向导就可以进行异形孔的设定和放置: solidwork放置螺丝孔以及显示螺纹的问题_.16-m3 solidwork-CSDN博客 2.如何修剪线条: 如何倒圆角或…

【AI基础】第四步:保姆喂饭级-langchain+chatglm2-6b+m3e-base

在第三步手动安装chatglm2-6b时,已经可以通过web进行交互。langchain重新封装了一下AI框架,提供更加友好的开发功能,类似于AI届的spring框架。langchain的安装过程也类似于上一步说的:【AI基础】第三步:纯天然手动安装…

LabVIEW 用于 MES 系统和卡钳上位机检测

LabVIEW 确实可以用于制造执行系统(MES)的开发以及卡钳上位机检测。以下是详细说明: 使用 LabVIEW 开发 MES 系统 数据采集与处理:LabVIEW 擅长实时数据采集和处理,可以连接多种传感器和设备,获取生产线上…

在线按模板批量生成文本工具

具体请前往:在线按模板批量生成文本工具

AIGC作答《2024年高考作文|新课标I卷》能拿多少分?

AIGC作答《2024年高考作文|新课标I卷》能拿多少分? 一、前言二、题目三、作答 一、前言 如火如荼的2024年高考圆满落幕,在如此Happy的时刻,AIGC技术正以其前所未有的热度席卷全球。它不仅改变了我们获取信息的方式,也…

Web IDE 在线编辑器综合实践(Web IDE 技术探索 三)

前言 前面两篇文章,我们简单讲述了 WebContainer/api 、Terminal 的基本使用,离完备的在线代码编辑器就差一个代码编辑了。今天通过 monaco editor ,来实现初级代码编辑功能,讲述的是整个应用的搭建,并不单独针对monac…

6.9总结

Vue生命周期 生命周期:指一个对象从创建到销毁的整个过程生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期的方法(钩子) mounted:挂载完成,Vue初始化成功,HTML渲…

找出链表倒数第k个元素-链表题

LCR 140. 训练计划 II - 力扣(LeetCode) 快慢指针。快指针臂慢指针快cnt个元素到最后; class Solution { public:ListNode* trainingPlan(ListNode* head, int cnt) {struct ListNode* quick head;struct ListNode* slow head;for(int i …

Java Web学习笔记29——Vue路由

Vue路由: 前端路由:点击菜单栏,地址栏会发生变化,会显示对应的组件。 URL中的Hash(#号后面的部分)与组件之间的对应关系。 Hash是/dept,那么就是部门管理组件; Hash是/emp, 那么…

计算机网络简答题

第一章 计算机网络 1.因特网是一个世界范围的计算机网络,记一个互联了遍及全世界的计算机设备的网络。 2.计算机网络将众多分散的、自治的(一台坏了不影响其他)计算机系统,通过通信设备与线路连接起来,由功能完善的软件实现资源共享和信息传递的系统。 3.计算机网络的组…

【AI论文与新生技术】Follow-Your-Emoji:精细可控且富有表现力的自由式人像动画技术

我们提出了 Follow-Your-Emoji,这是一种基于扩散的肖像动画框架,它使用目标地标序列对参考肖像进行动画处理。肖像动画的主要挑战是保留参考肖像的身份并将目标表情转移到该肖像,同时保持时间一致性和保真度。为了应对这些挑战,Fo…

二叉树—leetcode

前言 本篇博客我们来仔细说一下二叉树二叉树的一些OJ题目 请看完上一篇:数据结构-二叉树-CSDN博客 💓 个人主页:普通young man-CSDN博客 ⏩ 文章专栏:LeetCode_普通young man的博客-CSDN博客 若有问题 评论区见📝 &…

GDAL 保存TIFF时的Options的可选项

使用GDAL保存文件时,高级操作需要对参数Options进行设置,但代码注释中没有这个参数的可选项,在GDAL的官网上有这部分内容,在此记录,以防遗忘,也为方便同道中人查询。 官网关于gdal Driver options参数设置的…

vue3中进度条上加高亮圆点

实现效果 小圆点基于进度条定位&#xff08;left&#xff09;。 实现代码 <template><!-- 这块代码实现的功能&#xff1a;progressData遍历的年份进度数组&#xff0c;展示每年完成的进度--><ul><li v-for"(item, index) in progressData" :k…

手写kNN算法的实现-用余弦相似度来度量距离

设a为预测点&#xff0c;b为其中一个样本点&#xff0c;在向量空间里&#xff0c;它们的形成的夹角为θ&#xff0c;那么θ越小&#xff08;cosθ的值越接近1&#xff09;&#xff0c;就说明a点越接近b点。所以我们可以通过考察余弦相似度来预测a点的类型。 from collections i…

定个小目标之刷LeetCode热题(14)

了解股票的都知道&#xff0c;只需要选择股票最低价格那天购入&#xff0c;在股票价格与最低价差值最大时卖出即可获取最大收益&#xff0c;总之本题只需要维护两个变量即可&#xff0c;minPrice和maxProfit&#xff0c;收益 prices[i] - minPrice,直接用代码描述如下 class …

SpringCloud Gateway基础入门与使用实践总结

官网文档&#xff1a;点击查看官网文档 Cloud全家桶中有个很重要的组件就是网关&#xff0c;在1.x版本中都是采用的Zuul网关。但在2.x版本中&#xff0c;zuul的升级一直跳票&#xff0c;SpringCloud最后自己研发了一个网关替代Zuul&#xff0c;那就是SpringCloud Gateway一句话…

牛客 NC129 阶乘末尾0的数量【简单 基础数学 Java/Go/PHP/C++】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/aa03dff18376454c9d2e359163bf44b8 https://www.lintcode.com/problem/2 思路 Java代码 import java.util.*;public class Solution {/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff…

[CR]厚云填补_综述整理

SAR-to-Optical Image Translation and Cloud Removal Based on Conditional Generative Adversarial Networks: Literature Survey, Taxonomy, Evaluation Indicators, Limits and Future Directions Abstract 由于光学图像的局限性&#xff0c;其波段无法穿透云层&#xff0…