Safari 上的矢量标志出现划痕

Question

我正在为我的一位客户开发电子商务平台，我必须实现视网膜响应徽标（矢量格式，svg），在 Firefox、Chrome 和 IE 上一切正常，但不是Safari (iOS & OS X)，出现很多划痕，截图如下：

http://i.imgur.com/mpGdXD8.png?1

关于代码：

<div class="row">
<div id="header_logo" class="col-xs-12 col-sm-{4+$warehouse_vars.logo_width}{if isset($warehouse_vars.logo_position) && !$warehouse_vars.logo_position} col-sm-push-{4-$warehouse_vars.logo_width/2} centered-logo  {/if}">
<a href="{if $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
<img class="logo img-responsive" src="{$img_dir}/logo.svg"  data-fallback="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}" />
</a>
</div>

电子商务解决方案基于 Prestashop 1.6.0.14。徽标最初是使用 Photoshop 构建的，然后使用 Inkspace 矢量化。

非常感谢您的帮助。

Answer 1

我用 Inkscape 为您创建了徽标：

http://www.mediafire.com/download/5adsdwl9a3zeidu/Mytech_Logo.svg

下载并测试，应该可以。

通常 当你使用 inkscape 进行矢量化时 它会创建许多具有不同颜色的层，这使得文件非常大，比较你的徽标的文件大小，以及我发送的那个对你来说，那个文件大约有 10KB，有时某些浏览器可能缺少矢量化文件，这是由于所有这些层和 背景透明度 ，可能IE9也有这个问题，或者其他一些浏览器。

而是尝试直接使用 Inskcape 创建它，矢量化方法通常不是最好的选择，如果你想在网络上实现它，正如我之前告诉你的：

创建非常大的文件。

此外，如果您使用选项"smooth"，它看起来会带有模糊的边框。而且如果不使用的话边缘会显得粗糙，这样就失去了视网膜的概念，最后.jpg和.svg文件之间就没有区别了。

希望对您有所帮助！

Safari 上的矢量标志出现划痕

Scratches appear on vector logo on Safari

svg

vector

responsive-design

safari

prestashop-1.6

我用 Inkscape 为您创建了徽标：