Safari上的向量徽标上出现了划痕

Question

我正在为我的客户开发一个eCommerce平台，我必须实现一个视网膜响应的徽标(向量格式，svg)，火狐、Chrome和IE的一切都很好，但Safari (iOS & OS )却没有，出现了许多划痕，下面是屏幕截图：

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为您创建了Logo：

Logo.svg

下载并测试它，应该可以工作。

通常是，当你用inkscape矢量化时，它创建了许多不同颜色的层，这使得文件非常大，比较了您的徽标的文件大小，以及我发送给您的那个，其中一个大约有10 or ，有时矢量化文件在某些浏览器中可能缺少，这导致了所有这些层和背景透明度，可能IE9也有这个问题，或者其他浏览器。

相反，如果您想在web上实现它，就像我之前告诉您的那样，尝试使用Inskcape直接创建它，向量化方法通常不是最好的选择：

创建非常大的文件。

此外，如果您使用“平滑”选项，它将似乎与模糊的边界。如果你不使用它，边缘会看起来粗糙，这样它就失去了视网膜的概念，在最后一个.jpg和.svg文件之间不会有什么区别。

希望很有帮助！