× 說心事 政治時事 生活 運動 汽車 機車 自行車 相機 科技 理財 旅遊美食 娛樂 健康 美麗時尚 人際關係 文學故事 關於《思書》
吃喝玩樂 關於《思書》


Rails 中使用 SVG


紅寶鐵軌客
來關注...
關注:紅寶鐵軌客
關注有什麼好處?:當作者有新文章發佈時,「思書日報」就會匯總自動通知您,讓您更容易與作者互動。
x
紅寶鐵軌客
Rails 使用中,折磨中,享受中......
Victorian vintage round cut ruby engagement ring in 14k yellow gold 7mm center vs g h 984
    很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
     
    就,這會一點點,那會一點點⋯⋯
作者最新發佈的文章:
  • Rails 如何過濾你要的 HTML tag 內容
  • 要用 Faraday 還是 Net HTTP 呢?
  • Rails 如何檢查 URL 是否存在?
作者最近參與的討論:
  • Rails 常見資安陷阱與解決方法
現在就加入《思書》,你就可以關注本作者了!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,讓你寫作不再受限,討論更深入真實,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入
Rails 使用中,折磨中,享受中......
2018/01/24
50   0  


要有好看的不發毛圖,就一定要使用向量圖,用 Adobe 的人,就一定知道 AI 跟 PhotoShop 的不同,在網頁中,就是要用 SVG,在 Rails 中要使用 SVG,其實很簡單,

方法一:植入法

其中最簡單的方法就是將 SVG 直接放在 views 中的 ERB 當中,舉個例子,這是我用 CorelDRAW X6 做個一個簡單的箭頭符號,唯一改的是加入了一個  Class="test"

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW X6 -->
<svg class="test" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="3.24899in" height="2.83576in" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 2741 2392"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.str0 {stroke:#373435;stroke-width:5.85835}
.fil0 {fill:darkcyan;fill-rule:nonzero}
]]>
</style>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path class="fil0 str0" d="M3 1791l1367 0 0 595 1366 -1190 -1366 -1190 0 595 -1367 0 0 1190zm683 0m684 297m683 -297m0 -1190m-683 -297m-684 297m-683 595"/>
</g>
</svg>

然後在 CSS 中,就可以任意指定大小了,實務上,可以把這個 SVG 做成一個 partial,這樣就可以重複數用了,如果SVG 檔案不多,這是最簡單的使用法了。 

//test svg
svg.test {
width: 2rem;
height: 2rem;
 color: red;
}

這是結果:

 

方法二:當成檔案用

另外一個方法是把 SVG 的檔案放在 app/assets/images 中,這個好處是所有的影像擋都集中保管,既然是一個檔案,那就一定要讀取了,就加一個 helper 在 app/helpers/application_helper.rb

 # Rails SVG loader
def svg(name)
file_path = "#{Rails.root}/app/assets/images/#{name}.svg"
return File.read(file_path).html_safe if File.exists?(file_path)
'(not found)'
end

然後記得將 SVG 的 width 及 height 改成

width="inherit" height="inherit"

使用時,用個 CSS Class 包起來,這樣就可以改大小了。

<div class="svgtest">
<%= svg 'test_svg' %>
</div>

這樣就可以用 CSS 來改大小了。

.svgtest {
width: 4rem;
height: 4rem;
color: blue;
}

HTML:

test 2 on helper:
<div class="svgtest">
<%= svg 'test_svg' %>
</div>

秀個結果:

方法三:用 Gem

比較流行的是 inline-svg,寫 rails 最大的好處就是可以用 Gem,就看你喜不喜歡了,我是能少用就少用,但是用這個 Gem 是很方便的,只是它是用 Nokogiri,有人覺得慢,如果剛好有用,那就更適合了,這是他的網址,我覺得跟上面兩種也很像,主要的差別是用這個 Gem 可以在外設定 class 及其他 CSS style,看喜歡了。  這是另一篇類似的,使用類似的方法,但是用 assets。

方法四:用 Symbol 

這是參考這篇文章的,我是把 SVG 放在 ‘shared/test.html.erb' 中,大概會像這樣:(注意:我改了 stroke 及 fill 的設定為 currentColor)

<svg version="1.1" id="category-icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">
<symbol id="testsvg1" viewBox="0 0 2741 2392">
<defs>
<style type="text/css">
<![CDATA[
.str0 {stroke:currentColor;stroke-width:5.85835}
.fil0 {fill:currentColor;fill-rule:nonzero}
]]>
</style>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path class="fil0 str0" d="M3 1791l1367 0 0 595 1366 -1190 -1366 -1190 0 595 -1367 0 0 1190zm683 0m684 297m683 -297m0 -1190m-683 -297m-684 297m-683 595"/>
</g>
</symbol>
</svg>

使用時就呼叫這 ID 就好了:

<div class="svgtest-container">
<div style="display: inline-block;">
test icon symbol:
</div>
<div style="display: inline-block; vertical-align: middle;">
<%= render 'shared/icons' %>
<div class="skill-category active">
<svg class="testsvg-icon">
<use xlink:href="#testsvg1"/>
</svg>
</div>
</div>
</div>

CSS 的設定會是這樣:

.testsvg-icon {
max-width: 2rem;
max-height: 2rem;
color-interpolation: sRGB;
flood-color: blue;
}
.svgtest-container {
color: blue;
}
.svgtest-container svg{
fill: currentColor;
}

如果有一堆 SVG,我覺得這是最好的方法,如果只有幾個,就不用了。 但是,如果你有好幾個 SVG 都是用同一個程式(例如:Corel Draw),你很快就會發現,奇怪,為什麼加入新的 SVG 後,其他的 SVG 不見了或是變色了?別擔心,還是那個 CDATA[ 中的問題,CDATA[ 裡面列了 class name 如 .str0,這些 SVG 的 class name 如果相同,就會亂了,最簡單的方法就是每個 SVG 用不同的 class name,改掉後,別忘了也要記得改 g 裡面的 path 的 class name: <path class="str0"... happy SVG!

HTML:

<div class="svgtest-container">
<div style="display: inline-block;">
test icon symbol:
</div>
<div style="display: inline-block; vertical-align: middle;">
<%= render 'shared/icons' %>
<div class="skill-category active">
<svg class="testsvg-icon">
<use xlink:href="#testsvg1"/>
</svg>
</div>
</div>
</div>

放個結果:

如果問我那個好,我覺得如果就一兩個 SVG,就用一號方法吧,如果很多,就用最後一個了,但,都各有其優點啦。 

關於作者
很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
 
就,這會一點點,那會一點點⋯⋯


標籤: 圖檔不發毛 x 1 svg x 2 rails x 29

分享:


參與討論!
x
現在就加入《思書》,馬上參與討論!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,用筆名來區隔你討論內容,讓你的討論更深入,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入