<image>導致像素化圖像

我想創建一個具有重複元素的SVG。因此，我創建了一個我想要多次使用的圖像的SVG，並使用<image>標記（described here）將其包含。讓我們稱這個多用途圖像爲「M」，讓我們用<image>標籤「S」調用SVG文件。<image>導致像素化圖像

問題：沒有SVG瀏覽器antialiases圖像M.

例如，如果我使用的ImageMagick到最後SVG轉換爲PNG我用

convert -antialias -density 2000 file.svg -quality 100 file.png

然而，圖像M不會呈現與2000 DPI和完全像素化，而在S直接創建的形狀看起來很完美。

例如在S.svg：

<image xlink:href="M.svg" /> <!-- This looks pixelated --> 
<path d="M 0 0 50 50" stroke="black" /> <!-- This looks crisp -->

我怎樣才能讓節目，任何程序，使圖像M在更高的DPI？

來源

2013-05-22 Throwaway 647172

是否'M.svg'包含一個位圖圖像？可以在svg圖像中包含一個'.png'，但這不會神奇地將其轉換爲矢量表示。 –

@DanRoss：'M.svg'不包含位圖圖像。 –

根據所包含的圖像（是否在其他地方使用？），您可以使用<defs>和<use>將它包含在主SVG中。

這使您可以在SVG中定義多個在SVG中多次使用的組。在這裏看起來很合適。

一個例子是這樣的：

<svg viewBox = "0 0 1000 1000" version = "1.1"> 
    <defs> 
     <g id="myGroup"> 
     <circle cx = "200" cy = "200" r = "200" fill = "yellow" stroke = "black" stroke-width = "3"/> 
     <!-- your included image's content basically in here --> 
     </g> 
    </defs> 

    <use x = "100" y = "100" xlink:href = "#myGroup"/> 
    <use x = "100" y = "650" xlink:href = "#myGroup"/> 
</svg>

來源

2013-05-22 06:41:24 Sirko

這適用於我，但Firefox似乎忽略'use'的'width'和'height'屬性，雖然它們明確列在您鏈接的網站上。 –

@ Throwaway647172也許創建一個小提琴並提出一個新的問題:-) – Sirko

使用的寬度和高度屬性被視爲額外的變換，無論寬度和高度在defs中指定。 Firefox往往會讓你指定你應該指定的東西：它不會用合理的默認值填充缺失的值。 –

<image>導致像素化圖像

回答

相關問題