如果您想以svg的路径为目标,并使用标准的CSS规则,那么它必须是一个.svg矢量文件。

您可以在各种程序中创建它们。在Adobe Illustrator中,您可以“另存为”>svg’>注意该窗格的底部-请参阅svg代码>复制它>从某个聪明的地方过去。

png是一个位图,只是一个正方形,您可以调整大小、旋转等。

HTML格式

<div class="image-w bitmap-logo">
    <img src="http://placehold.it/400x200" alt="" />
</div>

<div class="image-w svg-logo">
    <?php require('big-svg-thing.php')?>
        or...
    {{partial 'big-svg-thing'}}
</div>

如果您使用PHP、handelbar或htmlbar等……只是为了避免svg代码。

CSS创意

对于需要随时调整大小的图像。。。我把它们放进去了 .image-w 控制它们并压缩它们的像素用于视网膜屏幕。

附件为 a fiddle ---因为svg是超级丑陋/长代码

注意,我将类添加到svg的要设置样式的部分

/* global / overall image styles */
.image-w img, .image-w svg {
    display: block;
    width: 100%;
    height: auto;
}

svg path { /* good preset for svg / sets 'fill' to casdade like color */
    fill: currentColor;
}  

.bitmap-logo { /* things you might do with you bitmap */
    max-width: 200px;
    transform: rotate(10deg);
    opacity: .2;
    border: 2px solid red;
}

.svg-logo { /* svg */
    max-width: 300px;
}

.svg-box { /* parts of the svg */
    color: blue;
}

.svg-squigle {
    color: red;
}