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

我为你创建了Logo，带有Inkscape：

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

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

通常使用inkscape进行矢量化时会创建多个不同颜色的图层，这会使文件非常大，比较徽标的文件大小，以及我发送给您的文件大小，即大概 10KB ，有些时候矢量化文件可能在某些浏览器中缺少，导致所有这些层和背景透明度，可能IE9也有这个问题，或者其他一些浏览器

相反尝试使用Inskcape直接创建它，如果你想在网上实现它，那么vectorize方法通常不是最好的选择，正如我之前告诉你的那样：

创建非常大的文件。

此外，如果您使用“平滑”选项，它将显示为带有模糊边框。如果你不使用它，边缘看起来很粗糙，这样就失去了视网膜的概念，最后在.jpg和.svg文件之间没有区别。

希望有所帮助！

Safari上的矢量徽标上出现划痕

1 个答案:

我为你创建了Logo，带有Inkscape：