自動縮放SVG在時間創作

gs -sDEVICE=svg -dNOCACHE -sOutputFile="photo.svg" -q -dbatch -dNOPAUSE "photo.pdf.out" -c quit

我想圖像的規模擴大一倍。使用GS的-r和-g選項只是給了我相同的圖像。我不確定這些選項在GS中是否支持SVG設備。

我試過用ImageMagick的convert繞過ghostscript，但是當我在瀏覽器中查看圖像時，它將SVG顯示爲代碼。

原始圖像是裁剪的PDF。我試圖直接縮放，但沒有得到一個質量的圖像，可能是由於我沒有在ImageMagick中標記的選項。

2014-04-15 Parag Magunia

SVG是矢量文件，因此獨立於分辨率。所以沒有什麼真正的理由去嘗試和「複製你想要複製的SVG的大小」。你應該問的真正的問題是「我渲染時如何顯示它們兩倍的大小？」要回答這個問題，我們需要知道你在用你生產的SVG做什麼。例如，你是否在網頁上顯示它們？ –

是的，他們正在呈現一個網頁。雖然正在設置DOCTYPE，但圖像不會與任何其他HTML元素一起顯示。現在我試圖用Perl解析svg元素的寬度和高度屬性。我希望GS有一個我可以設置的選項。 –

你不應該那樣做。你能發佈或鏈接到其中一個SVG嗎？特別是第一個'

我無法幫助您處理您的Ghostscript查詢（它看起來像-r和-g可能只適用於渲染爲位圖時），但我可以爲您提供有關如何使用SVG輸出的提示。

選項1

你可以用CSS縮放SVG。例如：style="transform: scale(4);"。但是這可能不適用於所有瀏覽器。

選項2

可以調整SVG標記上，使其呈現時顯示大。要做到這一點，您需要爲您的SVG添加一個viewBox屬性。這一步很複雜，因爲您的SVG的尺寸以點（「pt」）表示。而viewBox尺寸以CSS像素表示。一點是1/72英寸。而CSS像素是1/96英寸。

無論如何，viewBox屬性描述了SVG內容的邊界，格式爲"<minX> <minY> <width> <height>"。

minX和minY可能都是0爲您的文件。對於寬度和高度，我們需要將指定的寬度和高度從<svg>轉換爲默認座標空間。

在你的例子中，寬度是「5pt」。轉換爲CSS像素，這是5 * 96/72 = 6.6666。

高度爲「13pt」，轉換爲（13 * 96/72）= 17.3333。

所以我們視框變成"0 0 6.6666 17.3333"

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' 
    width='5pt' height='13pt' viewBox="0 0 6.6666 17.3333"> 
    <ellipse cx="2.5pt" cy="6.5pt" rx="2.5pt" ry="6.5pt" fill="green" /> 
</svg>

但是這不會使更大，因爲視框的大小與舊的寬度和高度相同。爲了使它變得更大，現在可以增加寬度和高度屬性。

例如，爲了做大做四次，四倍的寬度和高度，像這樣：

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' 
    width='20pt' height='52pt' viewBox="0 0 6.6666 17.3333"> 
    <ellipse cx="2.5pt" cy="6.5pt" rx="2.5pt" ry="6.5pt" fill="green" /> 
</svg>

Demo here

如果你希望它填補了瀏覽器窗口，設置寬度和高度到100%。或者刪除它們，這是相同的事情，因爲它們默認爲那個。

Demo here

希望這有助於。

來源

2014-04-17 08:51:31

我認爲加倍寬度和高度屬性，同時加倍g_transform縮放比例也會起作用，因爲在我的特殊情況下，所有其他標記都嵌入其中。它在我正在測試的特定瀏覽器中工作，但必須在IE和其他瀏覽器上進行測試。 –

自動縮放SVG在時間創作

回答

相關問題