การประยุกต์ใช้ svg SVG คืออะไร: ข้อดีและข้อเสียของการใช้งาน ใช้ประโยชน์สูงสุดจาก SVG
เราพบว่ามีรูปภาพประเภทใดและไฟล์ใดบ้าง และพบว่าภาพนั้นถูกสร้างขึ้นสำหรับวิดีโอที่วาดด้วยมือ ไฟล์พิเศษ SVG.
เป็นเรื่องยากที่จะพบมันบนอินเทอร์เน็ตเนื่องจากมีการสร้างมันขึ้นมา บางโปรแกรมและมันเปิดขึ้นพร้อมกับพวกเขา และดูเหมือนว่า:
ตามที่ฉันได้กล่าวไว้ในบทความก่อนหน้านี้ไฟล์นี้ถูกสร้างขึ้นสำหรับโปรแกรมวิดีโอที่วาดด้วยมือ ด้วยความช่วยเหลือนี้ วิดีโอที่วาดด้วยมือจึงดูน่าดึงดูดยิ่งขึ้น
ไฟล์นี้ให้คุณวาดทั้งแบบมีรูปทรงและวาดแบบไม่มีรูปทรง
เช่น การวาดภาพในโปรแกรม ไฟล์ PNGและการวาดภาพโดยไม่มีโครงร่างโดยใช้ไฟล์ SVG:
และในตัวอย่างนี้ คุณจะเห็นว่าไฟล์มีลักษณะอย่างไรและถูกวาดโดยใช้โครงร่าง การแรสเตอร์เวกเตอร์ในโปรแกรม Inscrabe
อย่าตัดสินรุนแรงเกินไป เพราะนี่เป็นเพียงการทดสอบเท่านั้น ในโปรแกรมนี้คุณสามารถทำอะไรได้มากขึ้น กราฟิกคุณภาพสูงนี่เป็นความพยายามครั้งแรกของฉัน แต่ฉันอยากให้คุณเข้าใจสิ่งนั้น ภาพแรสเตอร์สดใสและมีสีสันมากขึ้นเสมอ
ทำงานได้ดีในการแรสเตอร์รูปภาพโดยมีโครงร่างที่ชัดเจนยิ่งขึ้นเป็นกราฟิกแบบเวกเตอร์
ในการสร้างไฟล์เหล่านี้ มีหลายโปรแกรม โปรแกรมแก้ไขกราฟิก ทั้งแบบเสียเงินและฟรี มีแบบพกพาที่ไม่ต้องดาวน์โหลด ฮาร์ดดิสและยังมีเว็บไซต์ออนไลน์อีกด้วย
ไซต์ที่จะช่วยในการแปลงเป็นไฟล์ใด ๆ แต่ใช้งานได้เฉพาะขาวดำ:
การดาวน์โหลดจะเริ่มโดยอัตโนมัติ แต่โปรแกรมป้องกันไวรัสอาจบอกคุณว่าไฟล์ประเภทนี้เป็นอันตรายต่อคอมพิวเตอร์ของคุณ แอนตี้ไวรัสของฉันบ่นเกี่ยวกับไฟล์หายากทั้งหมด
เว็บไซต์ออนไลน์แห่งที่สองที่ฉันพบบนอินเทอร์เน็ต
ไซต์นี้ซับซ้อนกว่าเล็กน้อยและแสดงไฟล์เป็นสี ในกรณีนี้คุณสามารถเลือกจำนวนสีได้ด้วยตัวเอง และบนไซต์นี้ คุณสามารถสร้าง svg เพื่อสร้างภาพวาดโดยไม่มีโครงร่างได้ ฉันแนะนำให้คุณอัปโหลดไซต์ไปยัง Google และทำการแปลเนื่องจากเป็นภาษาอังกฤษ แต่คุณสามารถเข้าใจได้
ฉันคิดว่าทุกอย่างชัดเจนกับเว็บไซต์ออนไลน์ มาดูกันว่าเราจะพบอะไรจากโปรแกรมบ้าง
อะโดบี อิลลัสเตรเตอร์หนึ่งในบรรณาธิการที่มีชื่อเสียงและโด่งดังที่สุด จ่ายแล้ว แต่ไม่มีอะไรที่เป็นไปไม่ได้ สามารถพบได้ทั้งฟรีและเป็นภาษารัสเซีย นอกจากนี้ยังมีบทเรียนและหลักสูตรมากมายเกี่ยวกับการทำงานทั้งแบบฟรีและมีค่าใช้จ่าย
ไฟล์ที่สร้างขึ้นมีคุณภาพสูงและทำงานได้อย่างสมบูรณ์แบบกับโปรแกรม Explaindio
จากรายการทั้งหมด มีเพียง Inscape เท่านั้นที่ให้บริการฟรี โปรแกรมแก้ไขกราฟิก- มันไม่ใช่อะนาล็อกที่ไม่ดีกับโปรแกรมเช่น Adobe Illustrator
ฉันจะบอกความจริงกับคุณว่าฉันไม่ได้พยายามทำงานใน Corel
ใน Vector magic คุณสามารถแปลงรูปภาพใดๆ ให้เป็นไฟล์อื่นๆ ได้ มันเป็นตัวแปลงมากกว่าโปรแกรมแก้ไข แต่ก็ไม่แย่พอ
ดังนั้นเราจึงมาทำความรู้จักกับไฟล์ SVG ภาษาใหม่ที่ปรากฏเฉพาะในต้นปี 2000 แต่เริ่มเข้ามาแทนที่ในหมู่นักพัฒนาและนักออกแบบเว็บไซต์อย่างมั่นใจ
ฉันรอคุณอยู่ที่สถานที่ของฉัน จนกว่าจะถึงครั้งต่อไป.
ด้วยความเคารพคุณ Valentina Dudnichenko
SVG เป็นรูปแบบกราฟิกแบบเวกเตอร์ ชื่อของมันมีความหมายว่า “กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้” พูดง่ายๆ ก็คือมันคือสิ่งที่คุณใช้งานใน Adobe Illustrator SVG สามารถใช้งานบนเว็บได้อย่างง่ายดาย แต่ยังมีอีกมากที่ต้องทำความเข้าใจก่อน
ทำไมคุณถึงต้องการ SVG เลย?- ขนาดไฟล์เล็ก การบีบอัดที่ดีเยี่ยม
- ปรับขนาดได้ทุกขนาดโดยไม่สูญเสียคุณภาพ (ยกเว้นขนาดที่เล็กมาก)
- ดูดีบนเรตินา
- ความเป็นไปได้ที่หลากหลายจากตัวกรองและการโต้ตอบ
สร้างภาพวาดที่กำหนดเองใน Adobe Illustrator ตัวอย่างเช่น นี่คือนกกีวีที่มีรูปร่างเป็นวงรี
โปรดทราบว่ารูปภาพจะถูกครอบตัดอย่างคมชัดบริเวณขอบของรูปภาพ ผืนผ้าใบใน SVG มีบทบาทไม่น้อยไปกว่า PNG หรือ JPG
Adobe Illustrator สามารถบันทึกเป็น SVG ได้
เมื่อทำการบันทึก กล่องโต้ตอบอื่นพร้อมการตั้งค่าจะปรากฏขึ้น พูดตามตรง ฉันไม่รู้เกี่ยวกับพวกเขามากนัก มีบทช่วยสอนทั้งหมดเกี่ยวกับโปรไฟล์ SVG ฉันค่อนข้างพอใจกับ SVG 1.1
โปรดทราบว่าคุณมีตัวเลือกในการคลิกตกลงแล้วบันทึกไฟล์ หรือคลิกปุ่ม “รหัส SVG...” ซึ่งจะเปิดหน้าต่าง TextEdit (อย่างน้อยใน Mac) พร้อมรหัส SVG
ทั้งสองตัวเลือกมีประโยชน์
ในอิลลัสเตรเตอร์ พื้นที่ทำงานคือ 612px ✕ 502px
นี่คือขนาดที่รูปภาพบนเพจจะมีได้หากไม่ได้ระบุไว้เป็นพิเศษ ขนาดสามารถเปลี่ยนแปลงได้โดยการตั้งค่า คุณลักษณะความกว้างหรือความสูงของ img เช่นเดียวกับ PNG หรือ JPG นี่คือตัวอย่าง:
รองรับเบราว์เซอร์ทางเลือกหนึ่ง: ตรวจสอบการสนับสนุนผ่าน Modernizr และแทนที่ src สำหรับรูปภาพ:
ถ้า (!Modernizr.svg) ( $(".logo img" ).attr("src" , "images/logo.png" ); )David Bushell มีทางเลือกที่ง่ายมาก หากคุณไม่สนใจ JavaScript ในมาร์กอัปของคุณ:
"this.onerror=null; this.src="image.png"" >
สำหรับวิธีการแทรก SVG นี้ คุณสามารถใช้เทคนิคการย่อยสลายต่อไปนี้:
...และอีกครั้งที่เราใช้ Modernizr:
.logo-fallback ( display : none; /* ตรวจสอบให้แน่ใจว่าขนาดตรงกับขนาด SVG */ ) .no-svg .logo-fallback ( background-image : url (logo.png); ) เพิ่ม SVG ลงในเพจโดยใช้ แท็กหากคุณไม่ชอบตัวเลือกในการแทรก SVG ลงในเอกสารโดยตรงด้วยเหตุผลบางประการ (ยังคงมีข้อเสียอยู่สองสามประการ เช่น การแคชแทบจะเป็นไปไม่ได้เลย) คุณสามารถเชื่อมต่อไฟล์ SVG โดยใช้และรักษาความสามารถในการควบคุมไฟล์ได้ ส่วนต่างๆ ที่ใช้ CSS
โลโก้กีวีในกรณีที่ไม่รองรับ เรามาปรับใช้การลดระดับโดยใช้คลาสที่ Modernizr เพิ่ม:
.no-svg .logo ( กว้าง : 200px ; สูง : 164px ; ภาพพื้นหลัง : url (kiwi.png); )วิธีการนี้ไม่ก่อให้เกิดปัญหาในการแคช และเบราว์เซอร์รองรับ ดีกว่ากว่าคนอื่นๆ แต่ถ้าคุณใช้ ไฟล์ภายนอกหากมีสไตล์หรือฝังอยู่ในเอกสาร CSS จะไม่ทำงาน คุณต้องเพิ่มองค์ประกอบลงในไฟล์ SVG
/* เทคนิค CSS พิเศษสำหรับ SVG */ ... ไฟล์ภายนอกที่มีสไตล์สำหรับ SVG แทรกโดยใช้มีวิธีเพิ่มไฟล์สไตล์ภายนอกลงในไฟล์ SVG หากจำเป็นสำหรับโปรเจ็กต์ การแคช หรืออย่างอื่น ฉันค้นพบจากการทดลองว่าใช้งานได้กับไฟล์ SVG ที่ฝังอยู่ในเอกสารโดยใช้นามสกุล . ต่อไปนี้คือสิ่งที่คุณต้องเพิ่มลงในไฟล์ SVG ก่อนแท็กเปิด:
หากคุณพยายามเพิ่มโค้ดนี้ลงใน HTML คุณจะได้รับข้อผิดพลาดและเบราว์เซอร์จะไม่คิดที่จะโหลดโค้ดนี้ด้วยซ้ำ หากคุณรวมไฟล์ SVG ที่มีการแทนที่โค้ดที่เสนอ หรือ background-image ระบบจะไม่บ่น แต่โค้ดดังกล่าวจะไม่ทำงาน (แต่จะแสดง SVG)
- บทช่วยสอน
มาสร้างกันเถอะ แผนที่เชิงโต้ตอบ- บางสิ่งบางอย่าง. การโต้ตอบหมายถึงอะไร? มันจะต้องมีการโต้ตอบกับผู้ใช้และข้อมูลบนหน้าเว็บที่มันอยู่ ฉันคิดว่านี่เพียงพอที่จะพิจารณาว่าเป็นการโต้ตอบ
เรามาเอา SVG กันดีกว่า ทำไม ใช่ เพราะมันเป็นเรื่องง่ายที่จะทำงานร่วมกับบุคคลที่คุ้นเคยกับ HTML SVG คือ รูปแบบเวกเตอร์อิงตาม XML นั่นคือรูปภาพ SVG ก็มี DOM ของตัวเอง องค์ประกอบต่างๆคุณสามารถใช้กฎ CSS และควบคุม JavaScript เก่าที่ดีได้
เอาล่ะ เรามาเริ่มกันเลยดีไหม?
คนที่ใจร้อนที่สุดสามารถดูการสาธิตได้ทันที แต่ฉันขอแนะนำให้อ่านทุกอย่างตามลำดับ
เช่น ผมจะเอาแผนที่ประเทศหนึ่งรอบ (ที่มาใน Wikimedia Commons)
เนื่องจากตามแผนของฉัน พื้นที่ของแผนที่ไม่ควรมีสีที่แตกต่างกัน อันดับแรกฉันจึงตัดรูปแบบการเติมและเส้นโครงร่างออกจากแท็กที่ฉันสนใจ แต่ในทางกลับกัน ฉันจะให้คลาสและรหัสที่ฉันต้องการแก่องค์ประกอบเหล่านี้ ตัวอย่างเช่น class="area" สำหรับภูมิภาคและ class="city" สำหรับเมือง
ต่อไป ในส่วนรูปภาพ เราวางสิ่งที่คุ้นเคยอย่างเจ็บปวด:
.area ( เส้นขีด: สีดำ; เส้นขีดกว้าง: 2px; เติม: #E9FFE9; ) .city ( เส้นขีด: สีดำ; เส้นขีดกว้าง: 2px; เติม: สีแดง; )
นี่คือ CSS ที่ฉันสัญญาไว้ในการใช้งานจริง โดยหลักการแล้วเท่านี้ก็เพียงพอแล้ว ความแตกต่าง
ผลลัพธ์: 
เราจะใช้ HTML5 และใช้วิธีการที่เรียบง่ายที่สุด มีมนุษยธรรมมากที่สุด และเป็นมาตรฐาน:
เบราว์เซอร์ทั้งหมดที่รองรับ SVG จะ "กิน" อย่างถูกต้องและแสดงผล และพวกเขาจะให้เราทำงานร่วมกับเขาด้วยซ้ำ ภายใต้เงื่อนไขเดียว: หากเว็บเซิร์ฟเวอร์ให้บริการด้วยรูปภาพประเภท MIME/svg+xml MIME ประเภทอื่นอาจทำให้เกิดความสับสนได้ Google Chrome(แต่ไม่ใช่ Opera ซึ่งรู้ดีจากแท็กว่าติดตาม SVG และไม่ยอมให้มีการยั่วยุ)
ที่สอง วิธีการที่ถูกต้อง- แทรกโค้ด SVG ลงใน HTML โดยตรง ยอดเยี่ยมจากมุมมองของสคริปต์ แต่การรองรับเบราว์เซอร์ยังแย่กว่านั้น อย่างไรก็ตาม โปรดทราบว่า SVG ที่แทรกลงใน HTML แบบ "เสรีนิยม" ยังคงเป็น XML แบบ "รุนแรง" ดังนั้นจึงจำเป็นต้องมีเครื่องหมายคำพูดและแท็กปิด
คราดใต้น้ำ แต่ไม่ใช่ทุกอย่างจะง่ายนัก คุณสามารถสังเกตได้ทันทีว่าเบราว์เซอร์หัวแข็งไม่ต้องการปรับขนาดแผนที่ของเรา และหากไม่พอดี ก็จะแสดงแถบเลื่อนดังนี้:
เพื่อให้เบราว์เซอร์ทำงานกับ SVG ได้อย่างที่เราคาดหวัง เราควรลบแอตทริบิวต์ความกว้างและความสูงออกจากแท็กในไฟล์ SVG (หรือตั้งค่าเป็น 100%) และแทรกแอตทริบิวต์ viewBox ที่ออกแบบมาเป็นพิเศษสำหรับเบราว์เซอร์ที่มีค่าสำหรับ พิกัดมุมภาพซ้ายบนและขวาล่าง:
viewBox="0 0 493 416" ส่วนต่าง
หลังจากนี้สถานการณ์จะดีขึ้นอย่างมาก แต่ Google Chrome ให้คราดแก่เราอีกครั้ง: พยายามอย่างต่อเนื่องที่จะปรับขนาดรูปภาพให้สูงตามความสูงขององค์ประกอบและไม่เพิ่มความสูงตามความกว้างของแท็กและสัดส่วนของรูปภาพ เหมือนกับที่เบราว์เซอร์อื่นๆ ทำงาน 
มันน่าเสียดาย คุณจะต้องใช้ JavaScript และปรับความสูงขององค์ประกอบด้วยตนเอง
var viewBox = svgdom.rootElement.getAttribute("viewBox").split(" "); var อัตราส่วน = viewBox / viewBox; svgobject.height = parseInt(svgobject.offsetWidth / อัตราส่วนภาพ); ความแตกต่าง
ผลลัพธ์: 
การเข้าถึง SVG ที่แทรกผ่าน: ยากขึ้นเล็กน้อย
jQuery(window).load(function () ( // เราต้องรอจนกว่ากราฟิกทั้งหมด (และแผนที่ของเราด้วย) จะโหลด ดังนั้นเราจึงใช้ window.onload, var svgobject = document.getElementById("svgmap"); / / ค้นหาแท็ก if ("contentDocument" ใน svgobject) ( // เรามีอะไรบางอย่างจริงๆ หรือเปล่า var svgdom = jQuery(svgobject.contentDocument); // Access แบบจำลองวัตถุไฟล์ SVG // ตอนนี้เราทำหน้าที่ของเราแล้ว เช่น: jQuery("#figure1", svgdom).attr("fill", "red"); // ค้นหาแท็กด้วย id="figure1" ใน SVG DOM แล้วเติมด้วยสีแดง ) ));
ใช่ jQuery ใช้งานได้กับ SVG แต่เพียงบางส่วนเท่านั้น ตัวอย่างเช่น ฉันสังเกตเห็นว่าฟังก์ชัน addClass และ RemoveClass รวมถึงการค้นหาคลาส (jQuery(".class") ใช้งานไม่ได้ เราต้องบิดเบือน
โปรดทราบว่าฉันกำลังใช้เหตุการณ์ window.onload เนื่องจากเราต้องรอ โหลดเต็มหน้าต่างๆ พร้อมด้วยองค์ประกอบที่เกี่ยวข้องทั้งหมด (รวมถึงแผนที่ของเรา) อย่างไรก็ตาม ที่นี่เช่นกัน Google Chrome ก็รีบทำลายเราเช่นกัน หากสคริปต์ที่มี window.onload อยู่ในโค้ด html หน้าแท็ก โค้ดในตัวจัดการจะถูกดำเนินการก่อนที่จะโหลดแผนที่จริง ดังนั้นจึงต้องวางแท็กไว้หลังแผนที่ของเรา เศร้าแต่เป็นเรื่องจริง
การโต้ตอบที่หนึ่ง: เน้นพื้นที่บนแผนที่โดยคลิกที่ช่องทำเครื่องหมายบนหน้า สำหรับการโต้ตอบนี้ เราจะต้องมีช่องทำเครื่องหมายในแต่ละแถวของตารางพร้อมพื้นที่ รวมถึงรหัสที่ตรงกันหรือคล้ายกันสำหรับแถวและพื้นที่ของตารางบนแผนที่ที่นี่ เมื่อคุณคลิกที่ช่องทำเครื่องหมาย เราจะตั้งค่าหรือลบคลาสที่เลือกออกจากพื้นที่ที่เกี่ยวข้องบนแผนที่ และจากเส้นด้วย ไม่ใช่เรื่องยาก:
$("#areas input").change(function() ( var row = $(this).parent().parent(); var id = row.attr("id"); if (this.checked) ( row.addClass("selected"); $("#"+id, svgdom).myAddClass("selected"); อื่น ๆ ( row.removeClass("selected"); $("#"+id, svgdom). myRemoveClass ("เลือกแล้ว");
ดังนั้น คุณต้องเพิ่มคำจำกัดความของสไตล์สำหรับ ของชั้นเรียนนี้- ฉันปล่อยให้คุณทำเองตามรสนิยมและความชอบของคุณ ความแตกต่าง 
$("#titleswitch").change(function () ( var element = $(svgdom.getElementsByClassName("areatitle")) .add($(svgdom.getElementsByClassName("citytitle"))) .add($(svgdom. getElementsByClassName("titlebox"))) .add($(svgdom.getElementsByClassName("titleline"))); if (this.checked) ( element.myAddClass("hidden"); ) อื่น ๆ ( element.myRemoveClass("hidden" ); ) ));
แบบนี้ .
การโต้ตอบที่สาม: เน้นพื้นที่บนแผนที่เมื่อคุณวางเมาส์เหนือแถวของตาราง (และในทางกลับกัน) ในการดำเนินการนี้ คุณจะต้องวางเมาส์เหนือตัวจัดการเหตุการณ์เหมือนบนโต๊ะ: // เน้นภูมิภาคบนแผนที่เมื่อคุณวางเมาส์ไว้เหนือพื้นที่ที่เกี่ยวข้อง แถวตาราง $("#areas tr").hover(function () ( var id = $(this).attr("id"); $("#"+id, svgdom).myAddClass("highlight"); ), ฟังก์ชั่น () ( var id = $(this).attr("id"); $("#"+id, svgdom).myRemoveClass("highlight"); ));
...และไปยังพื้นที่บนแผนที่:
// ไฮไลต์แถวในตารางเมื่อคุณวางเมาส์ไว้เหนือแถวที่เกี่ยวข้อง ภูมิภาคบนแผนที่ $(svgdom.getElementsByClassName("area")).hover(function () ( var id = $(this).attr("id"); $("#areas #"+id).addClass( " highlight"); ), function () ( var id = $(this).attr("id"); $("#areas #"+id).removeClass("highlight"); ));
เพื่อให้เราเห็นสิ่งนี้ เราจะเพิ่มกฎ CSS ที่เกี่ยวข้องลงในเพจ:
tr.highlight, tr:hover, tr:nth-child(even):hover ( พื้นหลัง: lightyellow; ) ...และไปยังแผนที่ SVG: .highlight, .area:hover ( เติม: lightyellow; stroke: black; )
เมื่อคุณวางเมาส์เหนือแถวของตาราง (หรือเหนือพื้นที่บนแผนที่) คลาสที่จำเป็นสำหรับการเน้นจะถูกเพิ่มลงในพื้นที่ที่เกี่ยวข้องบนแผนที่ (บนแถวของตาราง) เพื่อให้โค้ดข้างต้นใช้งานได้ พื้นที่บนแผนที่และแถวในตารางจะต้องมีรหัสเดียวกัน (หรือคล้ายกัน) ความแตกต่าง
การโต้ตอบที่สี่: การแสดงข้อมูลจากเพจบนแผนที่ การมอบหมายคลาสซ้ำๆ อาจจะน่าเบื่อไปแล้ว ให้แผนที่แสดงข้อมูลบางอย่างแก่เรา สิ่งแรกอันดับแรก: ข้อมูล มาเพิ่มสองสามคอลัมน์ลงในตารางของเรา เช่น "ผู้คน" และ "เงิน" ข้อควรสนใจ: ข้อมูลนี้นำมาจากคนโง่และไม่มีส่วนเกี่ยวข้องกับ Amestris ตัวจริง และยังมีปุ่มตัวเลือกที่เราจะใช้สลับข้อมูลที่จะแสดง
ประการที่สอง เราต้องการสถานที่บนแผนที่ที่จะแสดงข้อมูล มาเพิ่มห้าบล็อกลงในแผนที่ (หนึ่งบล็อกสำหรับแต่ละภูมิภาค โดยเชื่อมโยงรหัสของพวกเขากับภูมิภาค) และรูปแบบที่สอดคล้องกันใน:
โค้ด JavaScript ที่จะดึงข้อมูลจากเซลล์ตารางและวางไว้ในกลุ่มข้อความ:
$("input").change(function () ( var descnum = $(this).parent().prevAll().length+1; $("#areas tbody tr").each(function() ( var id = $(this).attr("id").substring(4); var value = $(this).children(":nth-child("+descnum+")").text(); +id, svgdom).ข้อความ(ค่า);
และเมื่อสลับปุ่มตัวเลือก การ์ดก็จะแสดงตัวเลขที่ต้องการ เอาล่ะ! 
สำหรับ ของการโต้ตอบนี้ลองใช้ปลั๊กอิน jQuery.tooltip และผูกเข้ากับพื้นที่บนแผนที่ แน่นอนว่าเราจะนำข้อความสำหรับคำแนะนำมาจากตาราง:
$(svgdom.getElementsByClassName("area")).tooltip(( bodyHandler: function() ( var id = $(this).attr("id"); var area = $("#areas #"+id+" td :nth-child(2)").text(); var result = $("
").append($("").text(area)); $("#areas #"+id+" td:nth-child(2)").nextAll().each(function())( var pos = $(this).prevAll().length+1; var title = $("#areas thead th:nth-child("+pos+")").text(); var value = $(นี่) ข้อความ (); result.append($("
").text(title + ": " + value)); )); ส่งคืนผลลัพธ์; ) )); 
ความแตกต่าง
ข้อผิดพลาดที่เหลืออยู่จาก ปัญหาที่ทราบในตอนนี้ โปรดทราบว่า Google Chrome ไม่พิมพ์ภาพ SVG นี่เป็นข้อผิดพลาดหรือข้อบกพร่องของ WebKit โดยทั่วไป ความเข้ากันได้แบบย้อนหลัง เกือบทุกอย่าง เบราว์เซอร์ที่ทันสมัยรองรับ SVG: IE 9+, Opera 8+, Firefox 3+ (Firefox 1.5+ รองรับบางส่วน), Chrome ทุกรุ่น, Safari 3.2+ (รายการที่สมบูรณ์ยิ่งขึ้น) แต่อนิจจา อนาคตที่สดใสยังคงมาไม่ถึง และเรายังต้องคิดถึงการรองรับเบราว์เซอร์รุ่นเก่า
วิธีมาตรฐานและง่ายที่สุดหาก SVG เป็นเพียงรูปภาพ: แทรกเนื้อหาแทนที่ (เรนเดอร์แล้ว) ภาพ PNGและย่อหน้าของข้อความ) ภายในแท็ก
ขออภัย คุณกำลังใช้ รุ่นที่ล้าสมัยเบราว์เซอร์ที่ไม่รองรับแผนที่เชิงโต้ตอบ
หากเบราว์เซอร์ไม่รองรับ SVG รูปภาพและข้อความ PNG จะแสดงขึ้นเพื่อแจ้งให้ผู้ใช้ทราบว่าเบราว์เซอร์ของตนล้าสมัย ไม่มีการโต้ตอบ อย่างไรก็ตามมันอาจจะไม่จำเป็นจริงๆ จริงอยู่มีข้อเสียเปรียบประการหนึ่ง - อย่างที่ฉันสังเกตเห็นว่าเบราว์เซอร์สมัยใหม่ดาวน์โหลดรูปภาพ PNG ทดแทนอย่างดื้อรั้นแม้ว่าจะยังไม่แสดงก็ตาม
ผู้ที่สนใจสามารถใช้ประโยชน์จากการตรวจจับการสนับสนุน SVG โดยใช้ Modernizr และสร้างสิ่งที่ซับซ้อนมากขึ้นใน JavaScript
มากขึ้น กรณีที่ยากลำบากโซลูชัน Flash, VML หรือ Canvas (หรือทั้งหมด) จำนวนมากสามารถช่วยคุณได้ รายชื่อสามารถพบได้ที่นี่: HTML5 Crossbrowser Polyfills แต่น่าเสียดายที่วิธีแก้ปัญหาที่ฉันลองไม่ได้ช่วยฉัน อาจเป็นเพราะ SVG พร้อม CSS ที่ฉันร่างไว้บนเข่ากลายเป็นเรื่องยากเกินไปสำหรับพวกเขา
การแปลง SVG เป็น PNG มีหลายที่ทางออนไลน์ที่คุณสามารถแปลงรูปภาพ SVG เป็นอย่างอื่นได้ ฉันจะแนะนำให้ใช้คำสั่ง rsvg-convert จากแพ็คเกจ librsvg2-bin บางสิ่งเช่นนี้:แมว map.svg | แปลง rsvg > map.png
อย่างไรก็ตาม สามารถแปลงเป็นรูปแบบอื่นได้ เช่นเดียวกับการขยาย/ลดขนาดรูปภาพ โปรดดู --help
สำหรับการแปลงจำนวนมาก คุณสามารถเขียนคำสั่งที่ซับซ้อนมากขึ้นหรือดูตัวอย่างในแผนที่เชิงโต้ตอบของเธรดในฟอรัม เพิ่มแท็ก การสร้างและการเขียนโปรแกรมภาพเคลื่อนไหว SVG ที่ซับซ้อนสำหรับเว็บไซต์ แอปพลิเคชันมือถือและโครงการเชิงโต้ตอบ วิธีปรับปรุงการใช้งานอินเทอร์เฟซและสร้างเอฟเฟกต์ว้าว SVG.คืออะไร
SVG เป็นกราฟิกเวกเตอร์แบบสองมิติ หรือที่เรียกว่า "กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้" อย่างแท้จริง แต่ก็ยังคงเป็นเช่นนั้น รูปแบบข้อความซึ่งสามารถแก้ไขได้อย่างง่ายดายในกระดาษจดบันทึกหรือเพียงวาดเข้าไป บรรณาธิการเวกเตอร์: Adobe Illustrator, CorelDRAW, Adobe Fireworks, Incscape, SVG-Edit Online, ConceptDraw PRO และอื่นๆ
การพัฒนาจริงของ SVG เริ่มต้นด้วยเวอร์ชัน 1.1 ที่เผยแพร่โดย W3C ในปี 2554 การประกาศเวอร์ชันปรับปรุง 2.0 ซึ่งเหนือกว่าความสามารถของ Flash มีกำหนดการในปี 2560 ขอบคุณภาษา มาร์กอัป XMLฝังลงในเอกสาร HTML ได้อย่างง่ายดาย
วัตถุ SVG ไม่แตกต่างจากวัตถุมาตรฐานในโปรแกรมแก้ไขกราฟิก
เลิกใช้คำอุปมาอุปมัยทางดนตรีแล้วมาดูเคล็ดลับพื้นฐานในการแต่งเพลงกันดีกว่า ตรวจสอบให้แน่ใจว่า:
เส้นและเส้นขาด
รูปหลายเหลี่ยม
วงกลมและวงรี
เส้นโค้งเบซิเยร์
รูปทรงที่ซับซ้อน
SVG เช่นเดียวกับพื้นฐานอื่นๆ รูปแบบ XMLอนุญาตให้คุณใช้ตารางการแปลง (XSLT) เพื่อประมวลผลได้ ด้วยการแปลงข้อมูล XML เป็น SVG โดยใช้ XSL แบบง่าย คุณจะได้รับ การแสดงกราฟิกข้อมูลข้อความ เช่น การแสดงภาพกราฟ แผนภูมิวงกลม, ฮิสโตแกรม
SVG สำหรับเดสก์ท็อปSVG จะไม่สูญเสียคุณภาพเมื่อปรับขนาด และไม่ขึ้นอยู่กับความละเอียดของหน้าจอ
เนื่องจากข้อมูลเกี่ยวกับออบเจ็กต์ถูกจัดเก็บในรูปแบบคำอธิบาย จึงเป็นไปได้ที่จะเพิ่มขึ้นอย่างไม่มีกำหนด กราฟิกดั้งเดิมเมื่อส่งออกไปยังอุปกรณ์กราฟิก
จำนวนข้อมูลที่ถูกครอบครองโดยส่วนที่อธิบายไม่ได้ขึ้นอยู่กับขนาดที่แท้จริงของวัตถุ ซึ่งอนุญาตให้ใช้ จำนวนขั้นต่ำข้อมูลอธิบายได้มากเท่าที่คุณต้องการ วัตถุขนาดใหญ่ขนาดไฟล์ขั้นต่ำ ตัวอย่างเช่น การอธิบายวงกลมที่มีรัศมีตามต้องการต้องระบุตัวเลขเพียง 3 ตัวเท่านั้น ไม่นับคุณลักษณะ
ความพร้อมใช้งานของพื้นหลังโปร่งใส
SVG ดูดีโดยไม่สูญเสียคุณภาพ อุปกรณ์เคลื่อนที่และแท็บเล็ต
วัตถุ SVG มักจะมีขนาดเล็กกว่าภาพแรสเตอร์มาก
การใช้ CSS3 และ JavaScript คุณสามารถเปลี่ยนสไตล์และคุณลักษณะสำหรับองค์ประกอบ SVG ได้
SVG เหมาะอย่างยิ่งสำหรับการสื่อสารด้วยภาพและการโต้ตอบเล็กๆ น้อยๆ กับผู้ใช้บนอุปกรณ์เคลื่อนที่
แอนิเมชันที่ใช้ SVG
ความพร้อมใช้งานของพื้นหลังโปร่งใส
ง่ายต่อการสร้างและแก้ไข
สามารถบีบอัด gzip และปรับให้เหมาะสมได้โดยไม่สูญเสียคุณภาพ
คำเตือน ด้วยปริมาณที่เพิ่มขึ้น ชิ้นส่วนขนาดเล็กในภาพ ขนาดของไฟล์ SVG จะเพิ่มขึ้น การใช้ jpeg หรือแม้แต่ png ง่ายกว่า ตัวอย่างเช่น ภาพเวกเตอร์หญ้าสามารถมีน้ำหนัก 10 MB และภาพเดียวกันในรูปแบบ jpg จะมีน้ำหนัก 200 KB
วิธีทำงานกับ SVG. คุณจำเป็นต้องรู้อะไรในทางทฤษฎี?โครงสร้างของเอกสาร SVG ในไฟล์แยกต่างหาก
สำหรับแอนิเมชั่นแบบเต็ม เราจะใช้เฉพาะการฝัง SVG ในบรรทัดเท่านั้น
ชุดขั้นต่ำสำหรับการฝังใน html:
viewBox="xy ความกว้างความสูง" - กำหนดวิวพอร์ตที่กำหนดเอง
คุณสามารถใช้สไปรท์แบบอะนาล็อกได้เมื่อไอคอนทั้งหมดอยู่ในไฟล์เดียว และพื้นที่การมองเห็นจะแสดงเฉพาะไอคอนที่จำเป็นเท่านั้น
จำเป็นต้องจัดแนวด้วย PreservAspectRatio เพื่อปรับสัดส่วนภาพ
แกน X ในวิวพอร์ต:
xMin - ขอบด้านซ้ายของพื้นที่รับชม
xMid - จัดกึ่งกลางตามแกน X
xMax - ขอบด้านขวาของวิวพอร์ต
แกน Y ในพื้นที่รับชม:
YMin - ที่ด้านบน
YMid - กึ่งกลาง
YMax - ล่าง
meet - ระบุว่ารูปภาพควรรักษาสัดส่วนและมองเห็นได้ทั้งหมด (อะนาล็อก CSS ของ background-size:contain;)
ชิ้น - ระบุว่ารูปภาพควรรักษาสัดส่วนไว้และจะถูกปรับขนาดตามค่าขอบเขตสูงสุดของวิวพอร์ต (อะนาล็อก CSS ของ background-size:cover;)
none - หมายความว่ารูปภาพภายในจะสูญเสียสัดส่วนและจะใช้สัดส่วนของ viewBox
พื้นฐาน SVG พื้นฐาน
ฉันจะไม่ลงรายละเอียด (หัวข้อของบทความแยกต่างหาก) คำอธิบายสามารถพบได้ในมาตรฐาน W3C https://www.w3.org/TR/2016/CR-SVG2-20160915/shapes.html#RectElement
และเราสนใจแท็กมากที่สุด เนื่องจากแท็กช่วยให้เราสามารถควบคุมจุดใดๆ และเส้นโค้งเบซิเยร์ในเส้นทางได้ จะมีการกล่าวถึงด้านล่างในบล็อกภาคปฏิบัติ สิ่งสำคัญคือต้องรู้ว่ามีหลายแบบจำลองสำหรับการสร้างเส้นโค้ง:
เส้นโค้งเรียบ (S,s)
เส้นโค้งเบซิเยร์กำลังสอง (Q,q)
Bezier curveto กำลังสองเรียบ (T,t)
ส่วนโค้งวงรี (A,a)
เป้าหมายของฉันคือการนำเสนอเนื้อหาให้เรียบง่ายที่สุดเท่าที่จะเป็นไปได้ ตัวอย่างภาพประกอบ http://www.petercollingridge.co.uk/svg-tutorial/paths ขอบคุณ Peter Collingridge
จากประสบการณ์ของบริษัท ฉันจะบอกว่าการทำงานด้วยพิกัดจุดที่แน่นอนนั้นง่ายกว่า
การโคลนวัตถุโดยใช้แท็กและ
เรามีโปรเจ็กต์ที่ใช้ไอคอนประเภทเดียวกันหลายอันด้วย จำนวนมากเฉดสี ปัญหาได้รับการแก้ไขด้วยการสร้าง SVG แบบอินไลน์ส่วนกลางสำหรับทุกหน้าที่มีตัวแปรหลายตัว ใน ในสถานที่ที่เหมาะสมหน้าที่ใช้. สี CSS คือ use.green (กรอก: #ADFF2F;)
การไล่ระดับสี
วิธีทำงานกับ SVG. คุณต้องรู้อะไรบ้างในทางปฏิบัติ?Var s = สแนป("#svg"); // ใช้ svg สำเร็จรูปบนหน้าหรือสร้างใหม่ s = Snap(800, 600); // วาดเส้นทางใหม่ var p = s.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr(( เติม: "none", stroke: "#bada55 " , strokeWidth: 5 ));
สาระสำคัญของแอนิเมชั่นคือการย้ายจากตำแหน่งเริ่มต้นไปยังตำแหน่งสุดท้ายอย่างราบรื่น อธิบายไว้ด้านล่าง คำแนะนำทีละขั้นตอนเกี่ยวกับการสร้างภาพเคลื่อนไหวตาม SVG
ความสามารถในการฝัง SVG ใน HTML ช่วยให้คุณได้เปรียบในการจัดการองค์ประกอบ SVG และคุณลักษณะโดยใช้ JS รูปภาพด้านล่างแสดงให้เห็นว่าเราสามารถเข้าถึงไม่เพียงแต่จุดเท่านั้น แต่ยังรวมถึงเส้นโค้งเบซิเยร์ด้วย
โปรแกรมแก้ไขกราฟิกใด ๆ ที่สามารถใช้งานได้ กราฟิกแบบเวกเตอร์มีแผงเส้นทาง
ด้วยความช่วยเหลือนี้ เราจะจัดการคะแนนและเส้นโค้งเบซิเยร์
หน้าที่ของเราคือการวาดตำแหน่งเริ่มต้นและตำแหน่งสุดท้ายของเส้นโค้ง และอธิบายภาพเคลื่อนไหวบนหน้า html โดยใช้ Javascript
กำหนดเส้นทางของแอนิเมชั่นในอนาคตด้วยสายตา
อย่างที่คุณเห็นทุกอย่างเรียบง่าย! ไม่จำเป็นต้องมีเมทริกซ์การแปลงความสัมพันธ์ :)
วิธีใช้ SVG สำหรับแอนิเมชัน การโต้ตอบ และการโต้ตอบแบบย่อยจุดสำคัญ: ทำไมเราไม่ใช้ วิธีการมาตรฐานแอนิเมชั่นใน SVG? เราไม่ได้พิจารณาภาษา SMIL (Synchronized Multimedia Integration Language) เนื่องจาก W3C จะไม่รองรับ SMIL อีกต่อไป
ลองใช้ตัวอย่างเส้นโค้งสองเส้นในรูปแบบ XML
การเขียนโปรแกรมแอนิเมชั่น (การเปลี่ยนพิกัด X,Y ของจุด) จะมีลักษณะดังนี้:
- สิ่งสำคัญคือจำนวนคะแนนตรงกัน
มาดูตัวอย่างกันต่อ หากเราต้องการสร้างสี่เหลี่ยมจัตุรัสนูน คุณต้องวาดรูปสี่เหลี่ยมจัตุรัสที่มี 8 คะแนน
รหัสเพื่อทำให้สี่เหลี่ยมจัตุรัสเคลื่อนไหว:
Var s = Snap($("svg")); เส้นทาง var = s.path(start_path); // ติดตั้ง ตำแหน่งเริ่มต้น$("play").click(function () ( path.stop().animate(( "path": end_path ), 500, mina.easeout); // ตำแหน่งสิ้นสุด (ฟังก์ชัน () ( path.stop() .animate(( "path": start_path ), 500, mina.backout); // คืนตำแหน่งเริ่มต้น )).delay(500 )); //โค้ดสื่อถึงเพียงสาระสำคัญและไม่จำเป็นต้องทำงาน
ไลบรารี Snap SVG “วาด” การเคลื่อนไหวระหว่างรูปทรงโดยใช้ฟังก์ชันความราบรื่น
- สิ่งสำคัญคือเราได้รับแอนิเมชั่นข้ามเบราว์เซอร์คุณภาพสูง 100% โดยไม่สูญเสียคุณภาพ
เราสัมผัสได้ ด้านเทคนิคคำถาม แต่มีระดับที่สูงกว่าการเขียนโปรแกรมแอนิเมชั่น มันเกี่ยวกับแนวคิด
แนวคิดเรื่องแอนิเมชั่นเมื่อพิจารณาแนวคิดแอนิเมชันต่างๆ แล้ว จะพบว่าแอนิเมชันนั้นไม่ถูกต้อง ซึ่งสามารถเรียกว่าเป็นการนำเสนอได้ และไม่สามารถใช้ในโครงการได้ ในความเห็นของเรา เราได้รวบรวมวิธีแก้ปัญหาที่น่าสนใจไว้มากมายเมื่อแอนิเมชั่นช่วยเหลือผู้ใช้ได้จริงและสร้างเอฟเฟกต์ว้าว
แอนิเมชั่นที่ดีจะต้องถูกต้องในแง่ของการบรรลุผล ควรอธิบายให้ผู้ใช้ทราบถึงวิธีการทำงานกับอินเทอร์เฟซ และควรช่วยนำทาง - ในปัจจุบัน ในช่วงเวลาของการออกแบบแบบเรียบๆ เราเห็นความพยายามครั้งแรกที่จะทำ การออกแบบแบนมีชีวิตชีวาและสมจริง
จากประสบการณ์จริงของเราในการทำงานกับอินเทอร์เฟซสำหรับเว็บไซต์และแอปพลิเคชันมือถือต่างๆ เราสามารถระบุกฎและข้อดีหลายประการของแอนิเมชันได้:
ปรับปรุงการใช้งาน
ความคิดริเริ่ม
สะดวกในการใช้
ดำเนินงานแบบขนานหลายงานพร้อมกัน
การเร่งความเร็วอินเทอร์เฟซ
ปรับปรุงความคิดเห็นของผู้ใช้
กฎแอนิเมชั่น ภาพเคลื่อนไหวเป็นตัวบ่งชี้เพิ่มเติมเกี่ยวกับการทำงานที่ถูกต้องของอินเทอร์เฟซ
แอนิเมชันเป็นวิธีประหยัดพื้นที่
แอนิเมชันเป็นวิธีการเพิ่มความสมจริงให้กับอินเทอร์เฟซและสร้างเอฟเฟกต์ว้าวโดยไม่กระทบต่อการใช้งาน
แอนิเมชั่นเป็นวิธีซ่อน "จุดบกพร่อง" หรือหันเหความสนใจของผู้ใช้ (ตัวโหลด การโหลดพารัลแลกซ์ ตัวระบุความคืบหน้า)
ไม่ควรโหลดหน้าหรือหน้าจอมากเกินไป ทำให้โหลดนานและน่ารำคาญ
แอนิเมชั่นจะต้องได้รับการพิจารณาอย่างรอบคอบโดยคำนึงถึง อุปกรณ์ที่แตกต่างกันและเงื่อนไขที่ผู้ใช้เป้าหมายจะสัมผัสเมื่อทำงานกับผลิตภัณฑ์
แอนิเมชันไม่ควรเบี่ยงเบนความสนใจจากฟังก์ชันหลักหรือเนื้อหาบนหน้าจอหรือหน้าเว็บมากเกินไป
ควรสอดคล้องกับแนวคิดโวหารโดยรวมของแอปพลิเคชันหรือเว็บไซต์ เพื่อรักษาความสามัคคีโดยรวมในการรับรู้ของผลิตภัณฑ์
ตัวโหลดล่วงหน้าแบบยืดหยุ่น
แบบฟอร์มที่มีการตอบรับที่ราบรื่น
เมนูยืดหยุ่น
บทบาทของแอนิเมชั่นคุณภาพสูงในอินเทอร์เฟซกำลังเพิ่มขึ้น อินเทอร์เฟซสามารถมีชีวิตชีวาได้มากกว่าไอคอนแบบแบนและแอนิเมชั่นเชิงเส้น นี่คือที่มาของแนวคิดของการออกแบบที่ยืดหยุ่น
ประการแรกและสำคัญที่สุด การออกแบบที่ยืดหยุ่นคือการออกแบบที่ตอบสนองต่ออินพุตของผู้ใช้ การออกแบบที่ยืดหยุ่นช่วยให้เคลื่อนไหวได้อย่างอิสระ และช่วยให้ผู้ใช้งานสมบูรณ์ การดำเนินการที่จำเป็น- การออกแบบที่ยืดหยุ่นเข้ากันได้อย่างลงตัวกับเทรนด์ของ "อินเทอร์เฟซแบบหน้าต่างเดียว" รวมถึงอินเทอร์เฟซเชิงพื้นที่
ดังที่ลูกค้ารายหนึ่งของเรากล่าวไว้ว่า “สัมผัสใด ๆ ก็สั่นไหวเหมือนเยลลี่”
บทบาทของ SVG ในการออกแบบที่ตอบสนองนั้นขึ้นอยู่กับแอนิเมชัน ความยืดหยุ่น ความลื่นไหล การพึ่งพาซึ่งกันและกัน ความราบรื่น การแบ่งชั้น... โดยทั่วไปแล้ว การทำให้แฟลตมีชีวิตชีวา
พื้นฐานการออกแบบที่ยืดหยุ่นองค์ประกอบไม่ได้ดำรงอยู่ด้วยตัวมันเอง แต่ละองค์ประกอบขึ้นอยู่กับองค์ประกอบอื่น ๆ ทำให้เกิดพื้นที่ ระบบแบบครบวงจรความสัมพันธ์
การออกแบบที่ยืดหยุ่นปรับให้เข้ากับความละเอียดใดๆ
แต่ละองค์ประกอบให้ ข้อเสนอแนะเกี่ยวกับการกระทำของผู้ใช้ ผู้ใช้ไม่ควรมีข้อสงสัยเกี่ยวกับการดำเนินการนี้หรือการกระทำนั้น
การออกแบบที่ยืดหยุ่นมีจุดมุ่งหมายเพื่อความสะดวกของอินเทอร์เฟซเป็นหลัก
ฉันขอเตือนคุณอีกครั้งเกี่ยวกับแอนิเมชันหลักสองประเภทที่เรามุ่งเน้น:
แอนิเมชั่นยืดหยุ่น
แอนิเมชั่นไมโครอินเทอร์แอกชั่น
มีตัวกรอง 19 ตัวในมาตรฐาน SVG:
feBlend - การแบ่งชั้น (การซ้อนทับ หน้าจอ การคูณ และอื่นๆ)
feColorMatrix - เมทริกซ์สีช่วยให้คุณควบคุมสีของภาพ
feComponentTransfer - ใช้ในการเปลี่ยนสีเช่น เอฟเฟ็กต์โฟโต้ชอป- การปรับความสว่าง การปรับคอนทราสต์ ความสมดุลของสีหรือเกณฑ์ขั้นต่ำ
feComposite - ตัวกรองคอมโพสิต ใช้ในการซ้อนทับหรือตัดสองชั้น
feConvolveMatrix เป็นอะนาล็อกของเอฟเฟกต์ เอียง, นูน, เพิ่มความคมชัด และการตรวจจับขอบ
feDiffuseLighting - การจัดแสงตามทิศทาง ค่อนข้างคล้ายกับการทำแผนที่แบบ Bump
feDisplacementMap - แทนที่รูปภาพโดยใช้ค่าพิกัดพิกเซลของรูปภาพที่สอง
feFlood - วาดสี่เหลี่ยมใหม่เป็นหลัก
feGaussianBlur - เบลอ
feImage - แปลงกราฟิกแบบเวกเตอร์เป็นกราฟิกแรสเตอร์
feMerge - การรวมตัวกรอง SVG แบบขนาน
feMorphology - ใช้เมื่อจำเป็นต้องทำให้ขอบของภาพต้นฉบับบางหรือหนาขึ้น
feOffset - ภาพเลื่อนไปตามพิกัด x และ y
feSpecularLighting - ไฟแบ็คไลท์
feTile - โมเสกและอะนาล็อกลวดลาย
feTurbulence - สร้างเสียงเศษส่วนหรือแบบสุ่ม
feDistantLight - ฟิลเตอร์แบ็คไลท์
fePointLight - ฟิลเตอร์สำหรับแบ็คไลท์
feSpotLight - ฟิลเตอร์แบ็คไลท์
ทำไมไม่โฟโต้ชอปล่ะ? เราสามารถใช้การเรียงซ้อนตัวกรองตามลำดับ
มาดูวิธีสร้างความลื่นไหลในการออกแบบที่ยืดหยุ่นโดยใช้การซ้อนทับตามลำดับของตัวกรอง SVG
อินพุตเบลอใช้เวลา ภาพต้นฉบับทำให้เกิดภาพเบลอ
เมทริกซ์สีจะเป็นผลมาจากความเบลอและสร้างแสงเรืองแสง นี่คือจุดที่สีเปลี่ยนไป ภาพที่เข้ามาเพื่อสร้างช่องอัลฟ่าสำหรับตัวกรองคอมโพสิต
ฟิลเตอร์คอมโพสิตจะซ้อนทับผลลัพธ์เรืองแสงบนภาพต้นฉบับโดยใช้ตัวดำเนินการด้านบน (http://apike.ca/prog_svg_filter_feComposite.html)
ที่เอาต์พุตเราจะได้ "ความลื่นไหล" ระหว่างจุดเท่านั้น
ตัวอย่างการทำงานของฟังก์ชันความราบรื่น
ในไลบรารี Snap.SVG พวกเขามีหน้าที่รับผิดชอบตัวแปร “mina” ที่มีชุดฟังก์ชันน้อย
สามารถดูฟีเจอร์การค่อยๆ เปลี่ยนทั้งหมดได้ที่ http://easings.net
บรรทัดล่างภาพเคลื่อนไหวอินเทอร์เฟซแบบยืดหยุ่นคือ ในทางที่ดีการรักษาผู้ใช้บนไซต์ตั้งแต่การใช้งาน องค์ประกอบแบบโต้ตอบช่วยให้คุณแก้ไขปัญหาได้รวดเร็วและน่าสนใจยิ่งขึ้น และการพัฒนาเทคโนโลยีจะทำให้สามารถถ่ายโอนเครื่องมือ Photoshop ที่มีคุณสมบัติครบถ้วนไปยังเว็บได้ในไม่ช้าพร้อมกับความเป็นไปได้ของแอนิเมชั่น แต่ก่อนที่คุณจะใช้การออกแบบการเคลื่อนไหว คุณต้องวิเคราะห์ศักยภาพของมันเพื่อปรับปรุงประสบการณ์ผู้ใช้ แอนิเมชั่นที่ดีเกิดขึ้นตั้งแต่ขั้นแนวคิดและมีเป้าหมายที่ชัดเจน คุณสมบัติความนุ่มนวลทำให้การเคลื่อนไหวของคุณสมจริง แฟลตที่มีชีวิตอย่างแท้จริงรอเราอยู่ ข้อดีและประโยชน์ของการใช้แอนิเมชั่นในกระบวนการ "การสื่อสารด้วยภาพ" นั้นชัดเจนและมีมากกว่าข้อเสียที่เป็นไปได้
, อัลลา คูดิน.บทความนี้เขียนโดยแผนก AFFINAGE DESIGN และ AFFINAGE PRODUCTION ของ AFFINAGE
วันนี้เราจะมาพูดถึง SVG ว่ามันคือรูปแบบไหน ใช้กับอะไร และคุ้มค่าที่จะใช้หรือไม่ แม้ว่ารูปแบบจะไม่ได้ใหม่เป็นพิเศษ แต่ก็ได้รับความนิยมจากการใช้งาน ทั้งหมด เวอร์ชันล่าสุดเบราว์เซอร์ได้รับการสนับสนุนสำหรับรูปแบบนี้แล้ว
ทำไมเขาถึงได้รับความนิยม? และอะไรที่ทำให้แตกต่างจากที่อื่นกันแน่? วันนี้เราจะตอบคำถามเหล่านี้และบอกคุณถึงสิ่งที่คุณจำเป็นต้องรู้เพื่อเริ่มต้นใช้งานไฟล์ประเภทเหล่านี้
SVG คืออะไร?SVG – กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ กราฟิกแบบเวกเตอร์) เป็นรูปแบบเวกเตอร์สำหรับนักพัฒนาเว็บ ประเภทนี้รูปแบบได้รับความนิยมอย่างมากเนื่องจากสามารถแสดงภาพได้ ความละเอียดที่สูงขึ้นโดยไม่สูญเสียคุณภาพ เนื่องจาก SVG เป็นรูปแบบเวกเตอร์
แรงผลักดันในการพัฒนามาร์กอัปภาษานี้ได้รับจาก Consortium เป็นครั้งแรก เวิลด์ไวด์เว็บ (ทั่วโลก Web Consortium ซึ่งรู้จักกันดีในปี 1999 ในชื่อ W3C W3C ให้แนวคิดของ SVG ซึ่งเป็นภาษามาร์กอัปสำหรับการสร้างสองมิติ อินเทอร์เฟซแบบกราฟิกและรูปภาพ
นำไปใช้ในทางปฏิบัติอะไรทำให้ SVG ได้รับความนิยม และเหตุใดนักออกแบบจึงเริ่มใช้งาน SVG มากขึ้นเรื่อยๆ มันง่ายมาก มันทำงานได้ตามที่ควรจะเป็น
SVG มี น้ำหนักเบาเมื่อเทียบกับรูปแบบอื่นๆ รูปแบบนี้ง่ายๆ โอกาสอันเหลือเชื่อ- ธง สัญลักษณ์ องค์ประกอบอินเตอร์เฟส และนี่เป็นเพียงรายการเล็กๆ น้อยๆ เกี่ยวกับวิธีการใช้งาน ข้อได้เปรียบที่ใหญ่ที่สุดของการใช้มันคือรูปแบบเวกเตอร์นั่นคือสามารถใช้กับจอแสดงผลใดก็ได้ - ไม่ว่าความละเอียดจะเป็นอย่างไรก็จะแสดงเหมือนกันทุกที่
ไฟล์ SVG นั้นค่อนข้างง่ายต่อการจัดการเนื่องจากไฟล์จะถูกบันทึกเป็น ภาพนิ่ง- คุณสามารถเพิ่มการโต้ตอบให้กับเว็บไซต์ของคุณได้โดยทำ ช่วย SVGแอนิเมชั่นที่เรียบง่าย แต่สวยงามมาก
ตัวอย่างบางส่วนของตำแหน่งที่สามารถใช้ได้:
- โลโก้
- ภาพพื้นหลัง
- ใช้เป็นปุ่ม
- การ์ด
- ไดอะแกรมหรือภาพวาด
ตามกฎแล้ว SVG มักใช้ในการสร้างเว็บไซต์แบบตอบสนอง ภาพเคลื่อนไหว และเอฟเฟกต์ไดนามิกอื่นๆ
ข้อดีของการใช้ SVG
เหตุใดเราจึงควรละทิ้ง JPG หรือ GIF ตามปกติเพื่อสนับสนุน SVG มีเหตุผลหลายประการที่คุณควรใช้ในโครงการของคุณ
- SVG เป็นรูปแบบเวกเตอร์ ซึ่งเป็นเหตุผลว่าทำไมจึงคุ้มค่าที่จะใช้สำหรับไซต์ที่ปรับเปลี่ยนตามอุปกรณ์ ซึ่งขนาดของรูปภาพขึ้นอยู่กับความละเอียดในการแสดงผลของผู้ใช้ และ SVG ตอบโจทย์ทุกความต้องการได้อย่างไม่มีที่ติ
- รูปภาพ SVG ใช้ XML เพื่อกำหนดคุณสมบัติ ดังนั้นจึงมีความสามารถในการบีบอัดมากยิ่งขึ้น
- รูปภาพ SVG นั้นง่ายต่อการปรับแต่ง และเปิดโอกาสให้นักออกแบบสามารถเปลี่ยนสี เพิ่มเงา ฟิลเตอร์ ภาพเบลอ และเอฟเฟกต์อื่น ๆ อีกมากมายได้มากขึ้น
- SVG ค่อนข้างเข้าใจง่าย
- SVG ทำงานร่วมกับ เปิดเว็บมาตรฐาน
- คุณสามารถใช้เป็นประจำ โปรแกรมแก้ไขข้อความรหัสสำหรับ การสร้าง SVG- สิ่งนี้ให้อิสระแก่คุณในการกระทำของคุณ ทุกอย่างขึ้นอยู่กับความต้องการของคุณและระดับความรู้ของผู้เชี่ยวชาญในด้านนี้
คุณอาจตกใจที่ SVG มีประโยชน์มากมายเพียงใด และบางทีพวกเขาอาจคิดว่ามันไม่มีข้อเสีย แต่ไม่ มีสองสามอย่างแน่นอน และนี่คือบางส่วน:
- ไม่มีการรองรับเบราว์เซอร์รุ่นเก่า เช่น Explorer 8 และต่ำกว่า
- ไม่สามารถใช้ SVG ในภาพถ่ายได้เนื่องจากเป็นรูปแบบเวกเตอร์ และใช้เพื่อสร้างรูปทรงและเส้นต่างๆ
อนาคตของ SVG เพิ่งเริ่มต้น เนื่องจากรูปแบบรูปภาพที่ยอมรับ (และมาตรฐาน) สำหรับมือถือ SVG จะยังคงได้รับแรงผลักดันต่อไป