为什么SVG在ViewBox尺寸较大的火狐浏览器中会产生模糊图像？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

将 SVG 与媒体查询结合使用

问题跟踪器导航可能令人不快，但就目前而言，它们是跟踪 SVG 2 支持的最佳方式。然而，在我们进一步讨论之前，让我们先谈谈什么是 SVG 以及为什么要使用它。...然而，在更高分辨率的 400 PPI 显示器上查看时，相同的图像可能看起来很模糊。光栅图像也有固定尺寸，在原始尺寸下看起来最好。...因此，矢量图像与分辨率无关，无论显示分辨率或显示尺寸如何，都可以保持其质量。分辨率独立是SVG的最大优势。我们可以在不损失质量的情况下放大或缩小图像。...但是，实际尺寸可能更大或更小，具体取决于上述因素。并非每个 SVG 属性都可以通过 CSS 获得——至少不是在每个浏览器中。...，我们的 SVG 图像保留了它的内在尺寸，即使它的一部分被隐藏了。

6.2K0 0

网页中如何使用SVG

将SVG作为图像对于栅格图像，其固有尺寸就是它的像素尺寸。...带有 viewBox 属性，那么将用 viewBox 计算宽高比，图像会被缩放已匹配指定的尺寸； ③ 如果带有 viewBox 属性而没有尺寸，则 viewBox 的 height 和...④ 没有如何尺寸，浏览器应该为嵌入内容应用默认 HTML 尺寸，通常是 150 像素高，300 像素宽。 2. 将图像作为另一个元素的 CSS 样式属性插入当图像主要用来装饰时，推荐这种方式。...图像渲染（SVG 代码被转换为栅格图像用于显示）时与主页面是分离的（主页面样式对 SVG 无效），而且无法在两者之间进行通信。...，并且不会继承定义在父文档中的任何样式。

1.2K0 0

您找到你想要的搜索结果了吗？

是的

没有找到

网页中如何使用SVG

将SVG作为图像div> 对于栅格图像，其固有尺寸就是它的像素尺寸。...对于 SVG，则： ① 如果文件中的根元素带有明确的 height 和 width 属性，则它们会被用作文件的固有尺寸； ② 如果只指定 height 或者 width ，并且带有 viewBox...属性，那么将用 viewBox 计算宽高比，图像会被缩放已匹配指定的尺寸； ③ 如果带有 viewBox 属性而没有尺寸，则 viewBox 的 height 和 width 将被视为像素长度。...④ 没有如何尺寸，浏览器应该为嵌入内容应用默认 HTML 尺寸，通常是 150 像素高，300 像素宽。 2. 将图像作为另一个元素的 CSS 样式属性插入当图像主要用来装饰时，推荐这种方式。...图像渲染（SVG 代码被转换为栅格图像用于显示）时与主页面是分离的（主页面样式对 SVG 无效），而且无法在两者之间进行通信。

1.9K1 0

SVG的动态之美-搜狗地铁图重构散记

本文重点讨论搜狗地铁图对SVG的使用和优化方案。在讨论技术细节之前，我们先说明一下为什么要使用SVG。...灰色的部分为svg节点；白色的部分为地铁图线路的真实区域；中间的长方形为浏览器窗口，同时也是handler节点的尺寸。...container节点的高宽均为2000，决定这个数字的唯一原则是：只要比view节点的尺寸大即可。所以我们设置了一个比较大的值。...拖拽边界从图12很容易得出初始的拖拽边界，请参考以下伪代码： ViewBox <- 计算View的坐标和尺寸 Viewport <- 获取浏览器的尺寸 Offset <- 计算Container相对浏览器的偏移量...请参考以下伪代码： ViewBox <- 计算View的坐标和尺寸 Viewport <- 获取浏览器的尺寸 AspectRatioOfWindow <- 浏览器的宽高比 THEN 最大缩放比例

2.1K0 1

高清ICON SVG解决方案（下） - 腾讯ISUX

下文将讲诉前端侧我们如何用SVG来做成高清ICON，并且良好支持PC下的各个浏览器，并兼容IE6+以上的浏览器。...从上一篇文章中我们得知SVG 做的图标在IE9+的浏览器渲染效果相当的差，所以在IE下我们我们不使用SVG ICON，我们可以将SVG转成一倍的png图片来进行替代。...，它不需要告诉浏览器使用什么图像，而是直接提供了图像让浏览器自己去选择加载合适的图片。...---- 总结 SVG目前还是存在许多问题，Windows下使用IE的兼容性和渲染效果都太差，在PC侧我们无法全量使用，所以我们可以用上面的这套解决方案解决PC下所有浏览器下兼容问题，在Retina...上一篇文章之所以在火狐图标出问题那块讲了许久，并抛出更严谨的图标制作方法的主要原因这个方案需要对合并后的SVG Sprites转成PNG Sprite图片，如果SVG ICON做的有问题，那生成的图片也然出现发虚的情况

1.2K1 0

一篇文章带你了解SVG 图标

SVG图标是SVG图像，用作Web应用程序或移动应用程序内的图标或图像按钮。SVG图标也可以用于徽标。文章说明了SVG图标如何创建自己的SVG图标，以及在何处可以下载高质量的预制SVG图标。...一、SVG图标的优势图标使用SVG的优点： 1、可以轻松地按比例放大和缩小图标，具体取决于要在应用程序中显示的位置以及显示应用程序的屏幕尺寸。...二、在Web Apps中使用SVG图标如在Web浏览器中显示SVG所述，有几种方法可以在Web浏览器中显示SVG，作为HTML页面的一部分。...注：如何仅显示圆圈的一部分，而不是按比例缩小整个圆圈。造成此问题的原因是SVG图像文件缺少某些信息。必须为SVG viewBox属性设置一个值。...SVG viewBox属性指定应显示多少SVG画布（在X和Y方向上）。如何只显示SVG画布的包含圆圈图标的部分？只想显示SVG画布的包含圆圈图标的部分。

4.2K3 0

HTML5(七)——SVG基础入门

声明：SVG 虽然也是标签，但它不是 HTML5，标题加了 HTML5 只是为了与 canvas 放到一起。一、为什么要学 SVG ?...其他的图像格式都是基于像素的，但是 SVG 没有单位的概念，它的20只是表示1的20倍，所以 SVG 绘制的图形放大或缩小都不会失真。...与其他图像比较，SVG 的优势有以下几点： SVG 可以被多个工具读取和修改。 SVG 与其他格式图片相比，尺寸更小，可压缩性强。 SVG 可任意伸缩。 SVG 图像可以随意地高质量打印。...viewBox 属性　　使用语法：　　四个参数分别是左上角的横纵坐标、视口的宽高。...表示只看SVG的某一部分，由上述四个参数决定。　　使用 viewBox 之后，相当于svg整体大小不变，只能看到 viewBox 设置部分，视觉上被放大。

1.8K1 0

HTML5(七)——SVG基础入门

声明：SVG 虽然也是标签，但它不是 HTML5，标题加了 HTML5 只是为了与 canvas 放到一起。一、为什么要学 SVG ?...其他的图像格式都是基于像素的，但是 SVG 没有单位的概念，它的20只是表示1的20倍，所以 SVG 绘制的图形放大或缩小都不会失真。...与其他图像比较，SVG 的优势有以下几点： SVG 可以被多个工具读取和修改。 SVG 与其他格式图片相比，尺寸更小，可压缩性强。 SVG 可任意伸缩。 SVG 图像可以随意地高质量打印。...viewBox 属性　　使用语法：　　四个参数分别是左上角的横纵坐标、视口的宽高。...表示只看SVG的某一部分，由上述四个参数决定。　　使用 viewBox 之后，相当于svg整体大小不变，只能看到 viewBox 设置部分，视觉上被放大。

1.7K3 0

SVG精髓阅读笔记

计算机中描述图形信息的二大系统是栅格图形和矢量图形,在栅格图形系统中,图像被表示为图片元素或者像素的长方形数组,每个像素用其RGB颜色值或者颜色表内的索引表示,这一系列像素也称为位图....在矢量图形系统中,图像被描述为一系列几何形状,矢量图形阅读器接受在指定坐标集上绘制形状的指令,而不是接受一系列已经计算好的像素.有人把矢量图形描述为一组绘图指令,而位图则是在特定的位置填充颜色的点....SVG作为图像,作为图像,作为CSS背景,作为对象,内联SVG SVG的坐标系统视口,文档使用的画布区域称为视口,单位可以em,默认字体大小,ex 字母x的高度,px像素,pt点pc12点cm厘米,...坐标,宽度和高度下面一行代码是在4厘米*5厘米的图纸上,设置每厘米16个单位的坐标系统 ...属性viewBox的宽高比可以不同于视口的宽高比,在这种情况下SVG可以做三件事 1:按较小的尺寸等比例缩放图形,以使图形完全填充视口, 2:按较大的尺寸等比例缩放图形并裁剪掉超出视口的部分 3:拉伸和挤压绘图以使其恰好填充新的视口

1.4K2 0

网站图标开发指南

，设计师们通常都会给我们提供多个尺寸的设计图（@1x 图、@2x 图），于是我们就可以根据不同的客户端来选择对应尺寸的图片。...在浏览器渲染时，这张大图片只需要发起一次 HTTP 请求，然后就被浏览器缓存起来了，当再次使用该图片时，就会直接从缓存中进行读取，从而避免了发起多次 HTTP 请求。...字体文件一般比较大，但可以将不用的字体删掉。最后，字体图标虽好，但它的本质仍然一种文字，所以 CSS 在设置 color 时只能选一种颜色，如果我们想制作一个多色的小图标，也就无能为力了。...xmlns="http://www.w3.org/2000/svg" class="hidden"> <symbol id="icon-coffee" viewBox="0 0 20 20...总结一下 SVG 图标的特点：支持动态修改多个区域的颜色支持渐变色矢量图，放大也不会变模糊思考与总结本文介绍了 3 种小图标的使用方式，这里做一个简单回顾。

1.7K3 0

【Web技术】1576- 你的图片加载，一点都不酷炫！不信 You Look Look

GIF 2022-7-19 19-58-15.gif 前言现代网站中的图片使用量是很大的，在一些门户网站中，还会有一些大尺寸的图片展示，这个时候图片如果加载不顺畅，是很影响用户体验的图片格式简单说一下常用的几种图片格式...利用有损压缩来保持文件较小它能够轻松地处理16.8M颜色，可以很好地再现全彩色的图像在对图像的压缩处理过程中，该图像格式可以允许自由地在最小文件尺寸（最低图像质量）和最大文件尺寸（最高图像质量）之间选择...PNG 缺点优点：比起 jpeg 尺寸较大支持透明效果采用无损压缩在对图像的压缩处理过程中，该图像格式可以允许自由地在最小文件尺寸（最低图像质量）和最大文件尺寸（最高图像质量）之间选择 WEBP...image.png 初始展示一个具有模糊效果的缩略图，让用户知道轮廓，然后等原图加载完毕替换，因为有模糊效果，我们的缩略图是可以不考虑质量的，所以可以尽可能的小。...文件里面有 200 个轮廓，类似下面： image.png 如果你把轮廓依次加入 svg 里面，就会产生 geometrize-haxe-web[8] 这样的效果： GIF 2022-7-19 22

6922 0

制作动态头像_取网名独一无二的

目录头像预览 SVG语法头像制作制作圆形透明头像图片base64格式头像预览看一下博主的动态图像，是不是很炫酷，想不想拥有一个？...html，并且支持 css，浏览器通过读取 css 来渲染动画 svg 主标签内要有 xmlns:xlink="http://www.w3.org/1999/xlink" svg 标签中的 width.../height 来标识画布的大小 viewBox 标签可有可无，有的话前两位一般是0，后两位一般与 width、height 保持一致 g 标签可以用于嵌套，包括嵌套子 svg 文件添加动画的话在 style...> 头像制作这里交大家如何制作博主同款头像首先将博主的头像 svg 下载下来，用编辑器打开，大概能看到如下内容可以看到在 image 标签中有一个 base64 格式的图片其实只要将自己的头像图片转码成...base64 格式，替换博主的内容即可制作圆形透明头像一般头像都是正方形非透明的，直接转成 base64 格式，嵌入其中会很丑的我们需要将图片处理一下，变成圆形背景透明的头像这里我们就需要借助专业的软件了

8092 0

BAT 用一行代码实现了网页黑白显示

大意是使用 filter 可以给 HTML 元素添加一些效果，比如模糊、颜色偏移，通常用于调整图像，背景和边框的渲染。...CSS 标准里包含了一些预定义效果的函数，你也可以通过一个URL 使用 SVG 滤镜元素(SVG filter element)。...我们分析下下面这段代码： grayscale: 函数是 CSS 预定义的函数，主要作用是将图像转换为灰度图像，通过具体的值定义转换的比例。...下面这些前缀都是为了适配不同的浏览器，不然会有兼容性问题： -webkit-filter: 谷歌, Safari, 新版Opera浏览器, 以及几乎所有iOS系统中的浏览器(包括iOS 系统中的火狐浏览器...); 简单的说，所有基于WebKit 内核的浏览器； -moz-filter: 火狐浏览器； -ms-filter: IE浏览器和 Edge浏览器； -o-filter: 旧版Opera浏览器； filter

6735 1

SVG学习笔记，持续记录。

SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失...SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 浏览器会把SVG标记和样式转换成一个文档对象模型( document object model，DOM)...1.viewBox 用于在实际的svg上截取一小块，放大到整个svg显示，属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。...如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。...不指定大小时，但是指定了viewBox时，svg元素的大小等于父容器的大小，viewBox按照父容器大小进行截取。不指定大小，也没有指定viewBox，svg大小默认为300*150。

2.7K4 0

巧用 SVG 滤镜还能制作表情包？

不规则边框的生成方案背景今天在群里面聊天，看到有人发这个表情包： ? 刚好最近一直在学习 SVG，脑海中就把这个表情包的效果和 feTurbulence 滤镜关联了起来。...滤镜利用 Perlin 噪声函数创建了一个图像。噪声在模拟云雾效果时非常有用，能产生非常复杂的质感，利用它可以实现了人造纹理比如说云纹、大理石纹的合成。...该滤镜通过遍历原图形的所有像素点，通过 feTurbulence 滤镜产生的噪声函数将原图像的每个像素点重新映射到一个新的位置，形成一个新的图形。...通过设置一个非常大初始值，我们可以完全将输入的任何源图像粒子化，看看这个 Demo： <svg viewBox="0 0...这个时候，让滤镜的 scale="600" 动态变化回 scale="1"（当此参数为 1 时，图像表示为正常状态），也就能实现一个图形从粒子化到正常化的转变： <svg viewBox="0 0 200

1.1K1 0

SVG基础知识 Adobe Illustrator绘制SVG

/svg> Lineto 该执行从画笔的起点到位置绘制一条直线 [3.png] <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100...，貌似缺少了椭圆的一些数学知识总结绘制一颗心，以下是在网上找的 <...滤镜即模糊滤镜使用的in的参数为SourceGraphic表示图形作为原始的输入此外还有背景图，通道等 stdDeviation 表示模糊的程度完整的如下 <filter id="...<em>在</em>adobe ai中生成<em>svg</em> 使用adobe ai 生成<em>svg</em>文件创建一个画板 [9.png] 选择字符 [10.png] [11.png] 添加字体 [12.png] 转曲 [13.png] [14....png] 获取<em>svg</em>代码 [15.png] [16.png] [17.png] 画出<em>图像</em> [18.png] 代码如下 <!

2.7K5 0

位图和SVG用法比较

位图，亦称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。...扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。然而，如果从稍远的位置观看它，位图图像的颜色和形状又显得是连续的。提到SVG，我想大多数人的第一印象是矢量缩放。...图像类型组成优点缺点位图像素只要有足够多的不同色彩的像素，就可以制作出色彩丰富的图象，逼真地表现自然界的景象缩放和旋转容易失真，同时文件容量较大 SVG 数学向量文件容量较小，在进行放大...这样做的好处是，我们只需要发送一次 HTTP请求即可下载我们所需要的所有图标，减少浏览器请求并发数的压力，提高网页加载速度，增强用户体验。...尽管SVG具有可扩展、易交互并且节省网络资源等诸多优势，SVG还是没有在Web项目中被广泛应用。这是什么原因呢？ SVG 不支持早期的 IE 浏览器 -仅支持IE9及更高版本。

2.9K6 0

每个前端工程师都应该了解的图片知识(长文建议收藏)

两种格式有相同尺寸以及图像数据，他们的扩展名也是相同的，唯一的区别是二者显示的方式不同。...在一些网站打开较大图片时，你就会注意到这种技术。 ? 渐进式图片带来的好处是可以让用户在没有下载完图片就可以看到最终图像的大致轮廓，一定程度上可以提升用户体验（瀑布流的网站建议还是使用标准型的）。...优点：支持高级别无损耗压缩；支持 alpha 通道透明度；支持 256 色调色板技术以产生小体积文件最高支持 24 位真彩色图像以及 8 位灰度图像。支持图像亮度的 Gamma 校准信息。...SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。 SVG 是可伸缩的。 SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）。...SVG 可以与 JavaScript 技术一起运行 SVG图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果。 SVG图形格式可以用来动态生成图形。

1.1K2 1

每个前端工程师都应该了解的图片知识(长文建议收藏)

两种格式有相同尺寸以及图像数据，他们的扩展名也是相同的，唯一的区别是二者显示的方式不同。...在一些网站打开较大图片时，你就会注意到这种技术。渐进式图片带来的好处是可以让用户在没有下载完图片就可以看到最终图像的大致轮廓，一定程度上可以提升用户体验（瀑布流的网站建议还是使用标准型的）。...优点：支持高级别无损耗压缩；支持 alpha 通道透明度；支持 256 色调色板技术以产生小体积文件最高支持 24 位真彩色图像以及 8 位灰度图像。支持图像亮度的 Gamma 校准信息。...SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。 SVG 是可伸缩的。 SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）。...SVG 可以与 JavaScript 技术一起运行 SVG图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果。 SVG图形格式可以用来动态生成图形。

1.3K2 0

使用CSS提高网站性能的30种方法

开发人员采取简单的方法，向不断增长的样式表添加更多属性。文件越大，下载和处理时间就越长。 CSS影响渲染：浏览器分三个阶段呈现页面：布局（元素尺寸）、绘画（文本、颜色、边框、阴影等）、和复合（定位）。...12.用CSS效果替换图像尽可能使用CSS代码生成图形，而不是引用图像。现代的浏览器为复杂的形状提供了渐变、带图案的边框、圆角、阴影、滤镜、叠加、混合模式、蒙版、剪切和伪元素。... <circle cx="60" cy="60" r=...; fill: #0f0; } 您可以：从HTML中删除SVG样式属性对不同的节或页使用具有不同样式的相同图像，以及动画任何CSS属性。...但是，最好避免对触发重新布局的属性进行动画处理，例如尺寸（宽度、高度、填充、边框）或位置（顶部、底部、左侧、右侧、边距）。这会导致整个页面在每个动画帧上重新布局。

3.4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭