Need help? Chat now!

Hostwinds 博客

寻找结果为:


在您的网站上使用SVG图像:好处而不是那么好 特色图片

在您的网站上使用SVG图像:好处而不是那么好

通过: Hostwinds Team  /  六月 26, 2017


什么是SVG?

您肯定熟悉图像格式JPEG,GIF和PNG。但你知道SVG吗?SVG代表可伸缩矢量图形。与由像素定义的其他一些更多的常用图像类型不同,SVG文件使用XML语法基于矢量。无论在查看哪些分辨率,它们都可以显示出完美的方式,这可以使它们成为Web上的理想形象格式。但是,在使用之前,您也可能想要三思而后行的原因。

它与PNG,JPEG有何不同?

PNG,JPEG和GIF称为光栅图形。这些图形格式是基于像素的。这意味着它们由多色盒子的网格组成。例如,如果您的图像是5像素的图像,则意味着它具有25个彩色的正方形。这不能以任何方式更改。你不能只是向正方形添加更多颜色。你无法向他们添加更多细节或移动它们。

如果您决定将图像展开超过100%,则产生的效果将是像素化,并且图像将显示模糊。

另一方面,SVG图像是矢量图像。 因此,它们不是由颜色组成,而是由有关图像的描述组成。 可以更改此描述并将其更改为任何大小,而不会影响图像质量。

为什么要使用SVG图像?

无像素化

您可以以任何大小显示SVG文件,并且图像将不会获得像素化。即使你扩展了一个小图像并使它变得更大,它仍然会保持其清晰度和颜色......,也许最重要的是,看起来不是模糊。这是因为由于其向量形状,矢量图像可以包含的无限量。

图像尺寸小

SVG文件的图像大小小于其他图形,如JPEG或PNG文件。 因此,如果您想要剧烈较小的图像,则选择SVG图像应轻松帮助您实现这一目标。

对于图形图像,文件的大小受到分辨率大小的影响。但SVG图像分辨率不会改变。相反,它是重要的细节数,所以在增加图像的大小时,文件的大小不会增加。

动画图形

如果您熟悉Web开发,您甚至可以为SVG文件设置动画。这是向您的图形添加生命的好方法,也可以作为在您的网站上使用Flash的替代方案。

最好在网络上使用,因为SVG文件具有响应能力

这意味着文件将根据屏幕尺寸调整大小,具体取决于它是否正在从桌面计算机,选项卡或移动电话中查看。

最好用于复杂的插图.

这包括设计公司徽标,图表或图形。

它可以很容易地格式化

您可以使用HTML,CSS和JavaScript轻松格式化SVG图像。

使用SVG之前我应该知道些什么?

有选择性

您应该意识到此图像格式不应用于替换您网站上的所有图像格式。例如,对于需要深色的图像,它可能最好坚持使用JPEG图像。

广泛但不完全支持

SVG文件在大多数最常见的浏览器中得到广泛认可。 但是,某些较旧的浏览器,例如较旧版本的Internet Explorer,可能不支持此图像格式。

了解可能的安全风险

由于它可以在此文件类型中嵌入内容,例如,使用JavaScript,Hackers有可能使用病毒感染SVG文件。如果有人在其计算机上打开受感染的文件,那么他们的整个系统就会被感染。这可能导致计算机中的所有文件都可以加密,而黑客将要求您支付他们的赎金,以解密您的信息(勒索瓶 - 请参阅下面的Facebook事件)。Blepleing Computer的安全新闻编辑器,Catalin Cimpanu,详细解释了这一点 这里.

可以在公司网站上使用相同的策略。SVG文件可以被感染,并且访问该网站的任何人也可能都有他们的电脑感染。当公司实现问题时,情况可能已经失控了。这可能会严重损害您公司的可信度。

Facebook事件

由于此类图像在社交媒体网站上的敏感性,黑客使用Facebook Messenger进行了社交媒体活动,以用Locky勒索软件感染用户。

当某人在Messenger上收到受感染的SVG文件并单击时,他们的整个PC都被Locky Ransomware感染。 该文件包含Nemucod,它是SVG文件形式的恶意软件下载器。

黑客包括文件中的恶意JavaScript代码,即外部链接。 点击后,它会将您重定向到一个看起来像YouTube的网站。 到达网站后,弹出窗口会提示您在Google Chrome上安装某个扩展,以查看视频。

一旦安装了扩展程序,黑客就可以访问您的Facebook帐户,并使用相同的受感染文件秘密向所有朋友发送消息。 如 史蒂夫·拉根报道,Facebook声称问题与Chrome扩展有关,并且锁定不是问题......但其他人显然验证了锁定,实际上是交付的。

如何降低风险

保持警惕和积极主动.

公司可以保护其网站免受感染的最佳方式之一是始终关注网站上的任何图形更改 - 也定期检查网站上使用的代码。

获取合适的防病毒软件

在您的网站上使用SVG图像可能会更好地暂停,直到您有一个足够强大的防病毒,以检测您网站上存在问题。

如果您使用社交媒体网站(希望您是!),请考虑阻止SVG文件,如果您没有控制,以保护自己免受受感染的文件。此外,尽量不要点击社交媒体上的一个朋友发送的任何SVG文件。

如何创建SVG图像?

为了使用SVG文件格式,您需要有一个很好的绘图程序。有许多程序可以在线找到或在您的计算机上安装。如果您有预算和专业知识,则传统的Go-to是Adobe Illustrator。您还可以使用Inkscape,它是一个免费的开源程序,以创建SVG图形。如果这些似乎都没有适合您,Colorlib有一个很好的节目列表您可以使用 这里.

结论

SVG文件具有许多优点,吸引了设计人员/开发人员使用它们。 但是您应该意识到可能的风险,并能够预防和发现它们。

您是否已经开始使用SVG图像? 您是否有其他任何提示与我们的读者分享有关使用它们的?

您想在创建,使用和编辑SVG图像时查看带有提示的帖子吗?

如果您发现此帮助,请分享。

撰写者 Hostwinds Team  /  六月 26, 2017