有兩種不同的（合理的）svg畫板尺寸調整方法。
這裡的「畫板」一詞指的是illustrator中的概念，基本上是文件的白色繪圖區域。 最終，它引用實際svg輸出中的viewbox。 這對前端開發人員非常重要，因為如果沒有一致性，svg的定位將永遠是一次一次性的戰鬥，並且確實傷害了svg成為有用系統的想法。
我最近在一次會議上遇到了開發人員emma arce，她在她的團隊之間進行了非常有趣的對話，他們正試圖標準化某些東西並實現這一目標。 這是我的情況。
您可能會通過css應用大小調整，因此畫板的大小無關緊要，但尺寸應相同。 看起來像這樣：
優點相對尺寸。您可以在圖示本身的設計中直接控制與其他圖示相比的大小。 因此，如果稍後在css中將它們的大小全部設定為相同，則所有圖示將保持該大小關係，並且看起來很好。
缺點方向對齊。由於在任何給定圖示的任何給定側面上都有任意數量的空格，因此很難將內容對齊到圖示的邊緣，也很難期望圖示和相鄰元素之間的空間一致。
看起來像這樣：
優點對齊和定位。如果您想將圖示放置在元素的右上角，它將去那裡並且看起來很整齊。 不會有一些奇怪的任意數量的空格來補償。
缺點大小不一致。現在所有圖示的縱橫比都不同。 對於複雜性而言，這並不是乙個大問題，因為您仍然可以使用具有固定寬度/高度css來調整它們的大小，並且它們將在該區域內居中（假設使用預設的preserveaspectratio）。 但是，這將影響其大小。 給定的圖示長寬比越接近正方形，看起來就越大（它將填充給定的空間）。 更高或更寬的圖示需要縮小以適合該空間並顯得更小。 因此，一致的和與其他圖示相對的大小比較困難。
通過框保持一致性：如果在使用svg的每個例項中都將圖示放在視覺定義的框內，則對齊不會成為問題，因為您可以對齊框，它們看起來會很好。
您總是可以一次性完成：假設您有乙個非常長且細的箭頭形狀。 您總是可以只為那個做一些特殊css。 我不會基於少數異常值來更改整個系統。 這是關於整個系統的。
翻譯自:
SVG基礎 繪製SVG矩形
乙個元素代表乙個svg矩形。通過這個元素你可以畫出不同寬度，不同高度，以及不同描邊和不同填充顏色的矩形。同時它還可以繪製直角或圓角的矩形。乙個svg矩形的簡單例子 下面是乙個繪製svg矩形的簡單例子。複製 svg矩形的位置由x和y屬性決定。請記住，這個位置是相對於任何它最接近的父元素的位置。svg矩...
SVG相關學習 一 SVG基礎
svg svg 指可伸縮向量圖形 scalable vector graphics svg viewboxviewport svg 實際大小 viewbox x,y,width,height x 左上角橫座標，y 左上角縱座標，width 寬度，height 高度 視區盒子 以視區盒子大小選中元素然...
svg折線演算法 SVG之Paths
看d3.js的時候就見識過元素有多牛x，啥都能畫出來，可不知其原理的話，看上去簡直形同天書！沒關係，有的是時間精力和耐性，仔細看看這天書的正確開啟方式。把看做是一支筆，可以按照我的意願在哪兒落 筆 畫各種各樣在其功能範圍內的線條，還能自動幫我做很多事情來美化這些線條。所有這些控制這支 筆 的資訊被包...