[SVG学习之路]我为什么要学习SVG

最新推荐文章于 2024-08-04 09:00:00 发布
最新推荐文章于 2024-08-04 09:00:00 发布
阅读量3.3k 收藏 1
点赞数
分类专栏： SVG学习 文章标签： svg 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Teatea_1/article/details/79425496
版权

首先自我介绍，我是一个快毕业的大专生，6月15日就得交毕业作品了。


为什么学SVG呢？

    在做网站的过程中遇到了一个问题，图片做为背景的时候，图片会进行拉伸，导致图片失真。于是乎，

搜索引擎就起到了重要的作用，我搜索了关键字：前端 背景图片失真解决方案，在知乎上找到了答案。

方案:https://www.zhihu.com/question/21815101    回答者：贺师俊

使用矢量图替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！

    看到SVG ,我又去百度了一下SVG是什么。一扇新世界的大门也打开了。

   实例: 

 截图工具:gifCam    

下载地址:https://gifcam.en.softonic.com/   进入网站步骤---->Free Download ----->Alternative download---->等待下载



柳鹏
关注
专栏目录
SVG之旅：SVG简介
W3cplus
12-14 769
自从2014年开始陆陆续续的开始就在接触SVG。但由于自身的原因，并没有对SVG进行系统化的学习，在实际的工作项目中并未真正的使用SVG相关的技术。为了储备相关的知识，并尝试在项目中使用SVG，有必要对该技术进行系统化的梳理和学习。所以开始每周会抽出大半的时间来学习和整理SVG相关的知识，希望在几个月后，这方面的技术有所突破。为了能记录SVG的学习和探索过程，整个学习的路径以及笔记将会在W3cpl
【SVG】为了前端页面的美丽，我选择学习SVG
归子莫的博客
11-10 844
【SVG】为了前端页面的美丽，我选择学习SVG 文章目录【SVG】为了前端页面的美丽，我选择学习SVG说明什么是SVG？SVG的优势一个小小的示例示例代码效果代码解析如何在HTML中使用SVG？使用 `` 标签使用 `` 标签使用 ` `标签使用`` 标签直接在HTML嵌入SVG代码SVG的基本形状矩形 ``圆形 ``椭圆 ``线` `折线` `多边形` `路径 ``总结 博客说明 文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！ 说明 SV
前端必知必会-html svg
最新发布
qq_24018193的博客
08-04 1112
SVG 代表可缩放矢量图形SVG 用于为 Web 定义基于矢量图形SVG 以 XML 格式定义图形SVG 文件中的每个元素和属性都可以动画化SVG 是 W3C 推荐标准SVG 与其他标准集成，例如 CSS、DOM、XSL 和 JavaScript<svg>本文介绍了的html svg使用，如有问题欢迎私信和评论。
为什么要用SVG？SVG与iconfont、图片多维度对比
Hi,印象钟情
03-15 1836
一、SVG是什么？ SVG是一种可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。 简单的理解，它是图形的另一种格式例如它和常见的图片格式.png、.jpg、.gif等是一类。 二、svg和其他格式图片对比 它和传统图片格式有什么不同？ 1. 兼容现有图片能力...
网页设计师为什么要用SVG图片？
chenxi004的博客
06-19 2333
在普通人眼中， SVG（Scalable Vector Graphics,可伸缩矢量图）可能最多就是在某些网站偶尔看到而已，最多只是知道这是某种图片格式，并不会对这种格式产生任何多余的想法。但是对于网页设计师来说，svg图片在很大程度上为他们的工作提供了相比其他格式图片的绝对性便利。所以，svg的哪些特性吸引了我们呢？今天的文章主要就是为大家讲一下，svg最吸引我们的特性。 伸缩自如 依旧清晰 与...
SVG 研究之路 (4) - Path 基礎篇
zoubf的专栏
05-07 1189
SVG 裡頭最為重要的元素：Path，因為SVG 是向量圖，所有的物件和元素都是由 Path ( 路徑 ) 所組成，所以 Path 就具有相當多的指令讓使用者設定， 換句話說，搞懂了 Path 就等於搞定了SVG ( 或是搞定 80% 的 SVG，不管啦 )。本篇文章先將 Path 的指令表列出來，方便之後查找有個列表整裡，其中一個非常需要注意的地方，參數大寫代表絕對座標，小寫代表與前一個座標的相...
html5+svg学习指南之SVG基础知识
12-13
学习SVG，你需要掌握基本的XML语法，理解SVG元素和属性的含义，以及如何使用CSS来样式化SVG图形。此外，熟悉JavaScript与SVG的交互，可以让你创造出更多动态和交互式的视觉效果。SVG是现代Web开发中的一个重要工具，...
基于svg的机器学习中-点线等拖拉拽工作流核心svg渲染原理部分demo.zip
02-16
这个名为"基于svg的机器学习中-点线等拖拉拽工作流核心svg渲染原理部分demo.zip"的压缩包文件，就是这样一个例子，它展示了如何使用SVG（Scalable Vector Graphics）技术来实现机器学习工作流的可视化拖拽功能。SVG...
lottie-to-svg:将抽奖动画转换为SVG文件
05-06
如果您因为要将完整的抽奖动画转换为SVG动画而找到了这个项目，对不起，我无法为您提供帮助。 我什至会争辩说您不应该这样做。 关于CSS动画（动画SVG将使用）是否比JS动画更好/更快/更强，存在争议。 。 继续使用...
SVG常用图形基础学习资料
02-03
通过深入学习SVG，你可以创建出美观且响应式的图形，适应各种屏幕尺寸，同时，SVG与JavaScript的结合还能带来丰富的交互性和动态效果。无论你是前端开发者、设计师还是数据可视化爱好者，SVG都是一个不可或缺的工具...
SVG 研究之路 (5) - Path 進階篇
zoubf的专栏
05-07 723
上一篇看完了 Path 大部分的指令，這一篇就要介紹最困難的 A 指令，什麼是 A 呢？就是「弧形」 ( Arcs )，更簡單來說就是畫個橢圓圓弧 ( Elliptical Arc )，這裡可能會有人有疑問，為什麼是橢圓圓弧，而不是圓形圓弧呢？因為橢圓形可以做成圓形呀就是這麼簡單ㄎㄎ，因此， A 指令裏頭參數非常之多，竟然高達 7 個參數，以下就一一為大家解釋這些參數。rx ： 橢圓的 x 軸半徑...
从零开始学习SVG
weixin_30291791的博客
06-01 253
1 什么是SVG？ MDN中的定义是：SVG即可缩放矢量图形（Scalable Vector Graphics，SVG)，是一种用来描述二维矢量图形的XML标记语言。 简单地说，SVG 面向图形，HTML 面向文本。 SVG 与 Flash 类似，都是用于二维矢量图形，二者的区别在于，SVG 是一个W3C 标准，基于 XML，是开放的，而 Flash 是封闭的基于二进制格式的。...
SVG相关学习(一)SVG基础
weixin_34133829的博客
03-07 138
SVG 相关学习 SVG SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG viewBox <svg width="500" height="300"></svg>viewport svg 实际大小viewBox="x, y, width, height" // x:左上角横...
[SVG学习之路]学会画形状
柳鹏的博客
03-17 568
据上次更新，已经有一段时间了，太忙了，公司有新的项目给我，就没学SVG。这几天回家可以学和更新了。废话不多说。IDE工具：  vscode 动态图软件：gifcam   vscode插件：SVG Viewer （1.4.3版本）  PS：这款插件可以直接在vscode上直接看到svg的效果。补充 动态图上的文字是在 网站：https://www.liaotiantu.com/imgtool/wor...
SVG：初步学习感想
weixin_33958366的博客
03-17 205
在初步学习和了解svg后，我对svg的学习有了一些感想，希望简单叙述一下。这是我的第一篇文章，如有错误还请谅解，错误请尽情指正，十分感谢。svg 是一种以数学形式达成类似绘图板一样的组件，可以使我们在页面上自己‘画’出想要的图案。svg标签是告诉浏览器这个组件内部全是专有标签。svg标签的使用中，需要的属性有svg绘图区域的大小即宽高。其次要表示遵循那个标准，常用的是添加xmlns="ht...
SVG 学习
aguang5241的博客
10-11 380
SVG 在 HTML 中 使用embed标签 <embed src="circle.svg" type="image/svg+xml" /> 使用object标签 <object data="circle.svg" type="image/svg+xml"></object> 使用iframe标签 <iframe src="circle1.svg"&...
svg 学习
cauyyl的博客
07-16 264
The SVG Canvas, Coordinate System, And Viewport
svg学习
前端小白成长记
03-19 983
学习SVG主要用来解决，图片和文字、小图标等，在不同分辨率屏幕下，位置会移动。 注意点 1.svg标签内不能使用div等html标签，但是可以用g来代替，见链接：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g 2.svg宽高固定时，下面的其他图片位置不会因为屏幕分辨率而变动 3.svg 的文本： <text x=...
svg的简单学习
weixin_41897680的博客
01-04 2436
前言 之前简单学习了一下canvas，现在再简单学习一下svg svg学习教程：菜鸟教程 在html中使用 教程中介绍了下面这几种用法 使用 <embed> 标签 优势：所有主要浏览器都支持，并允许使用脚本 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许） <embed src="circle1.svg" type="image/svg+xml" /> 使用 <object>标签 优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
SVG DOM学习笔记：Node、Document与Element对象解析
"学习SVG笔记" SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，用于在Web上创建和展示图形。这篇笔记主要涵盖了SVG DOM的相关知识，DOM（Document Object Model）是XML和HTML文档的一种结构化表示，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值