SVG เป็นรูปแบบที่ดีที่สุดสำหรับไอคอนบนเว็บไซต์ มี ไม่ต้องสงสัยเลย. ช่วยให้คุณมีไอคอนที่คมชัดได้ไม่ว่าความหนาแน่นของพิกเซลหน้าจอจะเป็นอย่างไร คุณสามารถเปลี่ยนรูปแบบของ SVG เมื่อวางเมาส์เหนือ และคุณยังสามารถทำให้ไอคอนเคลื่อนไหวด้วย CSS หรือ JavaScript
มีหลายวิธีในการรวม SVG บนเพจ และแต่ละเทคนิคมีข้อดีและข้อเสียของตัวเอง ในช่วงสองสามปีที่ผ่านมา ฉันได้ใช้ฟังก์ชัน Sass เพื่อนำเข้าไอคอนของฉันโดยตรงใน CSS และหลีกเลี่ยงไม่ให้มาร์กอัป HTML ของฉันยุ่งเหยิง
ฉันมีรายการ Sass พร้อมซอร์สโค้ดทั้งหมดของไอคอนของฉัน จากนั้นแต่ละไอคอนจะถูกเข้ารหัสลงใน URI ข้อมูลด้วยฟังก์ชัน Sass และจัดเก็บไว้ใน a คุณสมบัติที่กำหนดเอง บนรากของหน้า
TL; DR
สิ่งที่ฉันมีให้คุณคือฟังก์ชัน Sass ที่สร้างไลบรารีไอคอน SVG ใน CSS ของคุณโดยตรง
ซอร์สโค้ด SVG ได้รับการคอมไพล์ด้วยฟังก์ชัน Sass ที่เข้ารหัสใน URI ข้อมูล แล้วเก็บไอคอนไว้ในคุณสมบัติที่กำหนดเองของ CSS จากนั้นคุณสามารถใช้ไอคอนใดก็ได้ใน CSS ของคุณราวกับว่ามันเป็นรูปภาพภายนอก
นี่คือตัวอย่างที่ดึงมาจากโค้ดของเว็บไซต์ส่วนตัวของฉัน:
.c-filters__summary h2:after {
content: var(--svg-down-arrow);
position: relative;
top: 2px;
margin-left: auto;
animation: closeSummary .25s ease-out;
}
ทดลอง
โครงสร้าง Sass
/* All the icons source codes */
$svg-icons: (
burger: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0...'
);
/* Sass function to encode the icons */
@function svg($name) {
@return url('data:image/svg+xml, #{$encodedSVG} ');
}
/* Store each icon into a custom property */
:root {
@each $name, $code in $svg-icons {
--svg-#{$name}: #{svg($name)};
}
}
/* Append a burger icon in my button */
.menu::after {
content: var(--svg-burger);
}
เทคนิคนี้มีทั้งข้อดีและข้อเสีย ดังนั้นโปรดพิจารณาก่อนนำโซลูชันนี้ไปใช้ในโครงการของคุณ:
ข้อดี
- ไม่มีคำขอ HTTP สำหรับไฟล์ SVG
- ไอคอนทั้งหมดถูกเก็บไว้ในที่เดียว
- หากคุณต้องการอัปเดตไอคอน คุณไม่จำเป็นต้องดูไฟล์เทมเพลต HTML แต่ละไฟล์
- ไอคอนจะถูกแคชพร้อมกับ CSS ของคุณ
- คุณสามารถแก้ไขซอร์สโค้ดของไอคอนได้ด้วยตนเอง
- ไม่ก่อให้เกิดมลพิษ HTML ของคุณโดยการเพิ่มมาร์กอัปพิเศษ
- คุณยังคงเปลี่ยนสีหรือบางส่วนของไอคอนได้ด้วย CSS
จุดด้อย
- คุณไม่สามารถทำให้เคลื่อนไหวหรืออัปเดตบางส่วนของ SVG ด้วย CSS
- ยิ่งคุณมีไอคอนมาก ไฟล์ที่คอมไพล์ CSS ของคุณก็จะยิ่งหนักขึ้นเท่านั้น
ฉันมักใช้เทคนิคนี้สำหรับไอคอนมากกว่าโลโก้หรือภาพประกอบ SVG ที่เข้ารหัสจะหนักกว่าไฟล์ดั้งเดิมเสมอ ดังนั้นฉันจึงยังคงโหลด SVG ที่ซับซ้อนด้วยไฟล์ภายนอกด้วย แท็กหรือใน CSS ของฉันด้วย
url(path/to/file.svg)
.
การเข้ารหัส SVG ลงใน URI ข้อมูล
การเข้ารหัส SVG ของคุณเป็น URI ข้อมูลไม่ใช่เรื่องใหม่ ในความเป็นจริง Chris Coyier ได้เขียนโพสต์ เกี่ยวกับมันเมื่อกว่า 10 ปีที่แล้วเพื่ออธิบายวิธีการใช้เทคนิคนี้และเหตุผลที่คุณควร (หรือไม่ควร) ใช้
มีสองวิธีในการใช้ SVG ใน CSS ของคุณด้วย data URI:
- เป็นภาพภายนอก (โดยใช้
background-image,
เส้นขอบภาพ,
รายการสไตล์ภาพ…) - เป็นเนื้อหาขององค์ประกอบหลอก (เช่น
::before
or::after
)
ต่อไปนี้คือตัวอย่างพื้นฐานที่แสดงวิธีการใช้สองวิธีนี้:
ปัญหาหลักของการใช้งานนี้คือ คุณต้องแปลง SVG ด้วยตนเองทุกครั้งที่คุณต้องการไอคอนใหม่ และไม่น่าพอใจที่จะมีโค้ดยาวๆ ของโค้ดที่อ่านไม่ได้ใน CSS ของคุณ
นี่คือที่ที่ Sass เข้ามาช่วยชีวิต!
การใช้ฟังก์ชัน Sass
ด้วยการใช้ Sass เราสามารถทำให้ชีวิตของเราง่ายขึ้นโดยการคัดลอกซอร์สโค้ดของ SVG ของเราโดยตรงใน codebase ของเรา ทำให้ Sass เข้ารหัสอย่างถูกต้องเพื่อหลีกเลี่ยงข้อผิดพลาดของเบราว์เซอร์
โซลูชันนี้ส่วนใหญ่ได้รับแรงบันดาลใจจากฟังก์ชันที่มีอยู่ซึ่งพัฒนาโดย Threespot Media และพร้อมใช้งานใน ที่เก็บของพวกเขา.
นี่คือสี่ขั้นตอนของเทคนิคนี้:
- สร้างตัวแปรที่มีไอคอน SVG ทั้งหมดของคุณอยู่ในรายการ
- ระบุอักขระทั้งหมดที่ต้องข้ามสำหรับ URI ข้อมูล
- ใช้ฟังก์ชันเพื่อเข้ารหัส SVG เป็นรูปแบบ URI ข้อมูล
- ใช้ฟังก์ชันของคุณในรหัสของคุณ
1. รายการไอคอน
/**
* Add all the icons of your project in this Sass list
*/
$svg-icons: (
burger: ''
);
2. รายชื่อตัวละครที่หลบหนี
/**
* Characters to escape from SVGs
* This list allows you to have inline CSS in your SVG code as well
*/
$fs-escape-chars: (
' ': '%20',
''': '%22',
'"': '%27',
'#': '%23',
'/': '%2F',
':': '%3A',
'(': '%28',
')': '%29',
'%': '%25',
'': '%3E',
'': '%5C',
'^': '%5E',
'{': '%7B',
'|': '%7C',
'}': '%7D',
);
3. เข้ารหัสฟังก์ชัน
/**
* You can call this function by using `svg(nameOfTheSVG)`
*/
@function svg($name) {
// Check if icon exists
@if not map-has-key($svg-icons, $name) {
@error 'icon “#{$name}” does not exists in $svg-icons map';
@return false;
}
// Get icon data
$icon-map: map-get($svg-icons, $name);
$escaped-string: '';
$unquote-icon: unquote($icon-map);
// Loop through each character in string
@for $i from 1 through str-length($unquote-icon) {
$char: str-slice($unquote-icon, $i, $i);
// Check if character is in symbol map
$char-lookup: map-get($fs-escape-chars, $char);
// If it is, use escaped version
@if $char-lookup != null {
$char: $char-lookup;
}
// Append character to escaped string
$escaped-string: $escaped-string + $char;
}
// Return inline SVG data
@return url('data:image/svg+xml, #{$escaped-string} ');
}
4. เพิ่ม SVG ในหน้าของคุณ
button {
&::after {
/* Import inline SVG */
content: svg(burger);
}
}
หากคุณทำตามขั้นตอนเหล่านี้แล้ว Sass ควรคอมไพล์โค้ดของคุณอย่างถูกต้องและแสดงผลต่อไปนี้:
button::after {
content: url("data:image/svg+xml, %3Csvg%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox=%270%200%2024.8%2018.92%27%20width=%2724.8%27%20height=%2718.92%27%3E%3Cpath%20d=%27M23.8,9.46H1m22.8,8.46H1M23.8,1H1%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-linecap=%27round%27%20stroke-width=%272%27%2F%3E%3C%2Fsvg%3E ");
}
คุณสมบัติที่กำหนดเอง
Sass ที่ดำเนินการแล้วตอนนี้ svg()
ฟังก์ชั่นใช้งานได้ดี แต่ข้อบกพร่องที่ใหญ่ที่สุดคือไอคอนที่จำเป็นในหลายตำแหน่งในโค้ดของคุณจะถูกทำซ้ำและสามารถเพิ่มน้ำหนักไฟล์ CSS ที่คอมไพล์ได้มาก!
เพื่อหลีกเลี่ยงปัญหานี้ เราสามารถเก็บไอคอนทั้งหมดของเราไว้ใน ตัวแปร CSS และใช้การอ้างอิงไปยังตัวแปรแทนการส่งออก URI ที่เข้ารหัสทุกครั้ง
เราจะเก็บรหัสเดิมไว้ แต่คราวนี้เราจะส่งออกไอคอนทั้งหมดจากรายการ Sass ไปที่รูทของหน้าเว็บของเราก่อน:
/**
* Convert all icons into custom properties
* They will be available to any HTML tag since they are attached to the :root
*/
:root {
@each $name, $code in $svg-icons {
--svg-#{$name}: #{svg($name)};
}
}
ตอนนี้แทนที่จะเรียก svg()
ทุกครั้งที่เราต้องการไอคอน เราต้องใช้ตัวแปรที่สร้างด้วย --svg
คำนำหน้า
button::after {
/* Import inline SVG */
content: var(--svg-burger);
}
เพิ่มประสิทธิภาพ SVG ของคุณ
เทคนิคนี้ไม่ได้ให้การเพิ่มประสิทธิภาพใดๆ กับซอร์สโค้ดของ SVG ที่คุณกำลังใช้ ตรวจสอบให้แน่ใจว่าคุณไม่ทิ้งรหัสที่ไม่จำเป็น มิฉะนั้นจะถูกเข้ารหัสและจะเพิ่มขนาดไฟล์ CSS ของคุณ
คุณสามารถตรวจสอบ รายการที่ยอดเยี่ยมนี้ ของเครื่องมือและข้อมูลเกี่ยวกับวิธีการเพิ่มประสิทธิภาพ SVG ของคุณอย่างเหมาะสม เครื่องมือที่ฉันชอบคือ Jake Archibald's SVGOMG — เพียงลากไฟล์ของคุณไปที่นั่นแล้วคัดลอกโค้ดที่ส่งออก
โบนัส: การอัปเดตไอคอนเมื่อวางเมาส์เหนือ
ด้วยเทคนิคนี้ เราไม่สามารถเลือกด้วยส่วนเฉพาะ CSS ของ SVG ได้ ตัวอย่างเช่นไม่มีทางที่จะเปลี่ยน fill
สีของไอคอนเมื่อผู้ใช้วางเมาส์เหนือปุ่ม แต่มีเทคนิคบางอย่างที่เราสามารถใช้กับ CSS เพื่อให้ยังคงสามารถปรับเปลี่ยนรูปลักษณ์ของไอคอนของเราได้
ตัวอย่างเช่น หากคุณมีไอคอนสีดำและต้องการให้เป็นสีขาวเมื่อวางเมาส์ไว้ คุณสามารถใช้ invert()
ตัวกรอง CSS นอกจากนี้เรายังสามารถเล่นกับ hue-rotate()
กรอง.
แค่นั้นแหละ!
ฉันหวังว่าคุณจะพบว่าตัวช่วยเล็ก ๆ นี้มีประโยชน์ในโครงการของคุณเอง แจ้งให้เราทราบว่าคุณคิดอย่างไรกับแนวทางนี้ - ฉันสนใจที่จะรู้ว่าคุณจะปรับปรุงให้ดีขึ้นได้อย่างไรหรือจัดการให้แตกต่างออกไป!