กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ใน HTML5 การแทรกภาพกราฟิก Svg html ตัวอย่าง

(ทบทวนบทความหลังการประชุมเรื่องการพัฒนาซอฟต์แวร์ในเยคาเตรินเบิร์กและการนำเสนออื่นๆ เวอร์ชันวิดีโอของรายงานในเยคาเตรินเบิร์กดูที่ techdays.ru )

HTML5 Canvas และ SVG คืออะไร

แคนวาส HTML5

– องค์ประกอบนี้เป็นผืนผ้าใบสำหรับการวาดภาพกราฟิกแรสเตอร์ อันที่จริงมันเป็นบล็อกว่างเปล่า มิติข้อมูลที่กำหนดซึ่งคุณสามารถวาดโดยใช้ API พิเศษสำหรับ JavaScript

API ประกอบด้วยวิธีการพิเศษ 45 วิธีและแอตทริบิวต์ 21 รายการที่ใช้เพื่อแสดงกราฟิกแบบดั้งเดิม กำหนดสไตล์ การแปลง เข้าถึงแต่ละพิกเซล และฉายภาพและวิดีโอ

ตัวฉันเอง องค์ประกอบถูกกำหนดโดยตรงในข้อกำหนด HTML5 API ของมันถูกอธิบายไว้ในเอกสารแยกต่างหาก - บริบท HTML Canvas 2D

SVG

ดนตรีเป็นเรื่องสนุก

เกมแสดงภาพดนตรีและกราฟิกที่สวยงาม (http://musiccanbefun.edankwan.com/)

ตัวอย่างไดอะแกรมใน SVG

แผนภาพของโครงกระดูกมนุษย์ระบบเป็นระยะ องค์ประกอบทางเคมีและระบบทางเดินหายใจ (http://ie.microsoft.com/testdrive/Graphics/RealWorldDataAndDiagrams/Default.xhtml)

แผนที่ยานเดกซ์

ตัวอย่างที่ใกล้เคียงจากชีวิตจริงคือเมื่อวาดเส้นทางโดยใช้ SVG (หากเบราว์เซอร์รองรับ) ดูเสวนาเรื่อง "Maps and SVG" จากค่าย HTML5 ของเราด้วย

ตัวอย่างเพิ่มเติม:

  • Beauty of the Web http://www.beautyoftheweb.com/ – เว็บไซต์จริงจากโลกแห่งความเป็นจริง
  • ผู้พัฒนา: unplugged http://contest.beautyoftheweb.com/ – โครงการที่เข้าร่วมในการแข่งขันแอปพลิเคชัน HTML5

ความแตกต่างระหว่าง Canvas และ SVG

ในสถานการณ์ต่างๆ Canvas หรือ SVG อาจเหมาะสมกว่าสำหรับการเรนเดอร์กราฟิกแบบไดนามิก - เราจะกลับมาที่ปัญหานี้ในตอนท้าย ในตอนนี้ เรามาดูความแตกต่างที่สำคัญระหว่างสิ่งใดสิ่งหนึ่ง:

ผ้าใบ SVG
รูปแบบ แรสเตอร์ เวกเตอร์
การปรับขนาด
เข้าถึง

การเข้าถึงพิกเซลส่วนบุคคล (RGBA)

เข้าถึง แต่ละองค์ประกอบ(โดม)
ความสามารถในการจัดทำดัชนีและการเข้าถึง

มองเห็นได้เฉพาะแรสเตอร์สุดท้ายเท่านั้น (คุณไม่สามารถเลือกรูปร่าง ข้อความ ฯลฯ) ได้ ซึ่งส่งผลเสียต่อการเข้าถึง

คุณสามารถดูโครงสร้างได้ (เช่น ดึงข้อความทั้งหมดออกมา)
การจัดสไตล์

สไตล์ภาพได้รับการตั้งค่าเมื่อเรนเดอร์ผ่าน API

สไตล์ภาพถูกกำหนดโดยแอตทริบิวต์ คุณสามารถรวม CSS ได้
การเขียนโปรแกรม

JS API สำหรับการทำงานกับพื้นฐาน

DOM สำหรับการทำงานกับองค์ประกอบ
อัปเดต

หากต้องการอัปเดต - วาดทับหรือวาดใหม่ทั้งหมด

สามารถเปลี่ยนแต่ละองค์ประกอบได้
กิจกรรม

ไม่มีวิธีที่ง่ายในการจัดการกับเหตุการณ์ของเมาส์ ต้องกำหนดวัตถุใต้เคอร์เซอร์ด้วยตนเอง

เหตุการณ์ของเมาส์ถูกส่งอย่างง่ายดายผ่าน DOM และประมวลผลโดยอัตโนมัติ
บูรณาการรหัส

รหัส JS แยกจาก Canvas

คุณสามารถรวม JS ไว้ข้างในได้

ต้องคำนึงถึงความแตกต่างเหล่านี้เมื่อใช้เทคโนโลยีอย่างใดอย่างหนึ่งสำหรับการแสดงภาพข้อมูล ตัวอย่างเช่น การวาดกราฟของฟังก์ชันอาจง่ายกว่าเมื่อใช้ Canvas ในขณะที่การแสดงคำแนะนำเครื่องมือ (การระบุวัตถุใต้ตัวชี้เมาส์) จะง่ายกว่าด้วย SVG

อย่างไรก็ตาม ในทางปฏิบัติ มีไลบรารีสำเร็จรูปจำนวนหนึ่งสำหรับการแสดงข้อมูลเป็นภาพ ซึ่งบางส่วนจะต่อต้านความแตกต่างเหล่านี้

ฉันจะไม่พูดถึงพื้นฐานของการทำงานกับแต่ละเทคโนโลยี ในฐานะเกริ่นนำ ฉันขอแนะนำรายงานโดย Vadim Makeev (Opera) จากค่าย HTML5 “Dynamic Graphics: Canvas และ SVG”

ดูเพิ่มเติมที่รายงาน MIX 2011:

การประมวลผลภาพด้วย Canvas

คุณสมบัติเด่นอย่างหนึ่งของ Canvas ก็คือเทคโนโลยีนี้ให้การเข้าถึงข้อมูลที่แสดงแบบพิกเซลต่อพิกเซล และช่วยให้คุณสามารถฉายภาพองค์ประกอบกราฟิกต่างๆ รวมถึงวิดีโอลงบนผืนผ้าใบได้

ตัวอย่างที่ดีของสิ่งที่จำเป็นคืองานการประมวลผล/วิเคราะห์ภาพ

Processing.js นำเสนอสองวิธีในการอธิบายการแสดงภาพ: โค้ดระดับกลาง ซึ่งจากนั้นจะถูกวิเคราะห์โดยไลบรารีเอง ( แยกไฟล์หรือภายในหน้า) และโค้ด JavaScript ที่ชัดเจน

ตัวอย่างเช่น ในการวาดเศษส่วนชุด Mandelbrot คุณสามารถใช้ทั้งตัวเลือกที่ระบุไว้บนหน้าพร้อมตัวอย่างที่เกี่ยวข้องและโค้ด JavaScript ต่อไปนี้:

var xmin = -2.5; วาร์ มิน = -2; วาร์ WH = 4; ฟังก์ชั่น SketchProc (การประมวลผล) (processing.setup = function () (processing.size(200, 200);processing.noLoop(); );processing.draw = function () (processing.loadPixels(); var maxiterations = 200; var xmax = xmin + wh; var ymax = ymin + wh; var dx = (xmax - xmin) / (การประมวลผลความกว้าง)< processing.height; j++) { var x = xmin; for (var i = 0; i < processing.width; i++) { var a = x; var b = y; var n = 0; while (n < maxiterations) { var aa = a * a; var bb = b * b; var twoab = 2.0 * a * b; a = aa - bb + x; b = twoab + y; if (aa + bb >16.0) ( แตก ; ) n++;

คุณสามารถลองด้วยตัวเองได้ที่นี่: http://silverbook.ru/projects/html5datavisualization/demo3-processingjs.htm (คัดลอกโค้ดวางลงในคอนโซลแล้วดำเนินการ)

ชุดเครื่องมือ JavaScript InfoVis (JIT)

ในการแสดงข้อมูล JIT จะใช้ค่าดิบเป็น JSON:

var json = ( "label" : ["label A" , "label B" , "label C" , "label D" ], "values" : [ ( "label" : "date A" , "values" : ) , ( "label" : "date B" , "values" : ), ( "label" : "date E" , "values" : ), ( "label" : "date F" , "values" : ), ( "ฉลาก" : "วันที่ D" , "ค่า" : ), ( "ฉลาก" : "วันที่ C" , "ค่า" : )] ); var pieChart = new $jit.PieChart(( injectInto: "infovis" , เคลื่อนไหว: true , offset: 30, SliceOffset: 0, labelOffset: 20, type: "stacked:gradient" , showLabels:true , resizeLabels: 7, Label: ( ประเภท: "Native" , ขนาด: 20, ครอบครัว: "Arial" , สี: "white" ), เคล็ดลับ: ( เปิดใช้งาน: true , onShow: function (tip, elem) ( tip.innerHTML = "" + องค์ประกอบชื่อ + "

: " + องค์ประกอบค่า; ) ) ));

เพียงเรียกการเรนเดอร์:

PieChart.loadJSON(json);

jQuery Sparklines

การแสดงภาพบนแผนที่โดยใช้ SVG

มาดู SVG กันก่อนและเริ่มต้นด้วยตัวอย่างง่ายๆ ลองจินตนาการว่าคุณจำเป็นต้องแสดงข้อมูลบางอย่างบนแผนที่ของภูมิภาค วิธีที่ง่ายที่สุดในการทำเช่นนี้คืออะไร?

หากคุณมีแผนที่สำเร็จรูปในรูปแบบ SVG (ฉันเอาแผนที่ของรัสเซียจากเว็บไซต์ Wikipedia) สิ่งนี้ทำได้ง่ายมาก - ก็เพียงพอแล้วที่แต่ละภูมิภาคจะมีรหัสเฉพาะของตัวเองในเอกสาร SVG จากนั้น แทรกแผนที่เป็น svg แบบอินไลน์และระบายสีด้วยโค้ดง่ายๆ ในสีที่ต้องการ:

var SverdlovskOblast = document.getElementById("SverdlovskOblast" ); SverdlovskOblast.style.fill = "#fe3300" ;

หากคุณทำสิ่งเดียวกันแบบวนซ้ำ คุณสามารถระบายสีได้ไม่เพียงแค่พื้นที่เท่านั้น แต่ยังรวมถึงทั้งภูมิภาคหรือแม้แต่ทั้งประเทศด้วย:< data.length; i++) { var item = data[i]; var region = document.getElementById(item.id); region.style.fill = RGBtoHex(item.value, 0, 0); }

var data = [(id: "KurganOblast" ค่า: 30), (id: "SverdlovskOblast" ค่า: 200), (id: "TyumenOblast" ค่า: 75), (id: "KhantiaMansia" ค่า: 100 ), (id: "YamaloNenetsAutDistrict" , ค่า: 20), (id: "ChelyabinskOblast" , ค่า: 150)]; สำหรับ (var i = 0; i

ไลบรารีสำหรับการแสดงข้อมูลเป็นภาพโดยใช้ SVG

ดังที่ฉันได้กล่าวไปแล้ว ทั้ง Canvas และ SVG เหมาะสำหรับการแก้ปัญหาแบบดั้งเดิมในการแสดงภาพข้อมูลตัวเลขในรูปแบบของกราฟและแผนภูมิ ในทั้งสองกรณี สามารถทำได้ค่อนข้างง่ายโดยใช้ไลบรารีที่เหมาะสม

ราฟาเอล

หากต้องการเพิ่มแผนภูมิวงกลมอย่างง่าย สิ่งที่คุณต้องมีคือโค้ดต่อไปนี้:

var r = Raphael("แผนภูมิ" , 640, 480); var พาย = r.g.piechart(320, 240, 100, );

ด้วยขั้นตอนเพิ่มเติมไม่กี่ขั้นตอน คุณจะสามารถเพิ่มคำอธิบาย คำอธิบายแผนภูมิ และคำแนะนำเครื่องมือแบบโต้ตอบได้:

var r = Raphael("แผนภูมิ" , 640, 480); r.g.txtattr.font = "12px "Fontin Sans", ฟอนติน-ซาน, ซานเซอริฟ"- r.g.text(320, 100, "แผนภูมิวงกลมแบบโต้ตอบ" ).attr(("font-size" : 20)); var พาย = r.g.piechart(320, 240, 100, ,
(คำอธิบาย: ["%%.%% – ผู้ใช้ระดับองค์กร" , "ผู้ใช้ IE" ], คำอธิบาย: "west" ,
href: ["http://raphaeljs.com" , http://g.raphaeljs.com]});
pie.hover(function () ( this .sector.stop(); this .sector.scale(1.1, 1.1, this .cx, this .cy); if (this .label) ( this .label.stop(); this .label.scale(1.5); this .label.attr(("font-weight" : 800) ) ), function () ( this .sector.animate((scale: ), 500, "bounce" ) ; ถ้า (this .label) ( this .label.animate((scale: 1), 500, "bounce" ); this .label.attr(("font-weight" : 400)); ) );

แผนภูมิประเภทอื่นๆ สามารถสร้างได้ในลักษณะเดียวกันโดยใช้วิธีการที่เหมาะสม ดูตัวอย่างโดยตรงบนเว็บไซต์ส่วนขยาย http://g.raphaeljs.com/

ไฮชาร์ท JS

API ไลบรารีทำให้การสร้างแผนภูมิจากข้อมูลใน JSON เป็นเรื่องง่าย:

var chart1 = new Highcharts.Chart(( แผนภูมิ: ( renderTo: "charts" , defaultSeriesType: "bar") , title: ( text: "Fruit Consumption" ), xAxis: ( หมวดหมู่: ["Apples" , "Bananas" , "ส้ม" ]), yAxis: ( ชื่อ: ( ข้อความ: "ผลไม้ที่กิน" ) ), ซีรีส์: [( ชื่อ: "Jane" , ข้อมูล: ), ( ชื่อ: "John" ข้อมูล: )] ));

ด้วยสคริปต์ที่ซับซ้อนกว่าเล็กน้อย คุณสามารถระบุรายละเอียดเพิ่มเติมได้ เช่น แสดงคำอธิบาย กำหนดค่าคำแนะนำเครื่องมือ:

var chart = new Highcharts.Chart(( แผนภูมิ: ( renderTo: "charts" , defaultSeriesType: "area" , spacingBottom: 30 ), title: ( ข้อความ: "การบริโภคผลไม้ *" ), คำบรรยาย: ( ข้อความ: "* ไม่ทราบการบริโภคกล้วยของเจน", ลอย: จริง , จัดเรียง: "ขวา" , แนวตั้งจัด: "ด้านล่าง" , y: 15 ), คำอธิบาย: ( เค้าโครง: "แนวตั้ง" , จัดเรียง: "ซ้าย" , แนวตั้งจัด: "ด้านบน" , x: 150, y: 100 , ลอย: จริง , เส้นขอบกว้าง: 1, สีพื้นหลัง: "#FFFFFF" ), xAxis: ( หมวดหมู่: ["แอปเปิ้ล" , "ลูกแพร์" , "ส้ม" , "กล้วย" , "องุ่น" , "พลัม" , "สตรอเบอร์รี่" , "Raspberries" ] ), yAxis: ( title: ( text: "Y-Axis" ), ป้ายกำกับ: ( formatter: function () ( return this .value; ) ) ), tooltip: ( formatter: function () ( return " "+this.series.name+"
" + this .x +": " + this .y; )), plotOptions: ( พื้นที่: ( fillOpacity: 0.5 )), ซีรีส์: [( ชื่อ: "John" , ข้อมูล: ), ( ชื่อ: "Jane" , ข้อมูล: )] ));

หากจำเป็น คุณสามารถแทนที่สไตล์เริ่มต้นด้วยสไตล์ของคุณเองได้

คุณควรเลือก Canvas หรือ SVG?

ดังที่เห็นได้จากตัวอย่างข้างต้น เทคโนโลยีทั้งสองมักเหมาะสำหรับงานการแสดงข้อมูลเป็นภาพ หลายๆ อย่างก็ทำในลักษณะเดียวกัน ในกรณีที่จำเป็นต้องใช้เอาต์พุตแบบพิกเซลต่อพิกเซล Canvas จะเหมาะสมกว่าอย่างเห็นได้ชัด ในกรณีที่ไดอะแกรมแบ่งออกเป็นออบเจ็กต์แต่ละรายการซึ่งคุณต้องรักษาความสามารถในการโต้ตอบไว้ SVG จะเหมาะสมกว่า

ผ้าใบจะดีกว่า
  • การแก้ไขกราฟิกแรสเตอร์
  • การเพิ่มเอฟเฟกต์ให้กับกราฟิก/วิดีโอ
  • การสร้างกราฟิกแรสเตอร์ (การแสดงข้อมูล เศษส่วน กราฟฟังก์ชัน)
  • การวิเคราะห์ภาพ
  • กราฟิกเกม (สไปรต์ พื้นหลัง ฯลฯ)
SVG ดีกว่า
  • อินเทอร์เฟซที่ปรับขนาดได้
  • อินเทอร์เฟซแบบโต้ตอบ
  • ไดอะแกรมโครงร่าง
  • การแก้ไขภาพเวกเตอร์

ในรูปแบบกราฟิกสามารถแสดงได้ดังนี้:

สุดท้ายนี้ อีกแง่มุมที่สำคัญที่สำคัญที่ต้องพิจารณาเมื่อเลือกเทคโนโลยีก็คือการเรนเดอร์ประสิทธิภาพเมื่อใช้ Canvas และ SVG:

ในทางปฏิบัติ Canvas จะทำงานได้ดีขึ้นเมื่อ ขนาดเล็กพื้นที่วาดภาพและต่อไป จำนวนมากวัตถุ SVG จะเหมาะกว่าเมื่อคุณต้องการปรับขนาดหรือแสดงผล หน้าจอขนาดใหญ่และไม่มากเกินไป ปริมาณมากวัตถุที่แสดงพร้อมกัน

ข้อสรุปนี้ตามมาจากรายงานของประธานคณะกรรมการ Bashneft ที่ประกาศต่อที่ประชุมสามัญผู้ถือหุ้นของ บริษัท ซึ่งบรรณาธิการได้รับสำเนา

ตามมาจากเอกสารว่าจากการสำรวจทางธรณีวิทยาพบว่ามีการค้นพบแหล่งผลิต 81 แห่งที่มีปริมาณสำรอง 19 ล้านตันในปี 2561

ในเวลาเดียวกันการใช้มาตรการทางธรณีวิทยาและเทคนิคที่มีประสิทธิภาพสูงและการแนะนำ เทคโนโลยีที่ทันสมัยการนำน้ำมันกลับมาใช้ใหม่ทำให้สามารถรักษาการผลิตน้ำมันในแหล่งสมบูรณ์ใน Bashkiria ในระดับปี 2560 เป็นเวลา 11 เดือน - 15 ล้านตัน ปริมาณการผลิตรวมในช่วงเวลานี้มีจำนวน 17.3 ล้านตันน้ำมัน

รายงานยังตั้งข้อสังเกตอีกว่าการสร้างห่วงโซ่การผลิตเดียวด้วยศูนย์การผลิตและการกลั่น Rosneft ได้เพิ่มประสิทธิภาพของโรงกลั่น Ufa และนำไปสู่การลดต้นทุนการดำเนินงานและโลจิสติกส์ โดยเฉพาะอย่างยิ่งการผลิตน้ำมันเบนซิน Euro-6 ได้รับการฝึกฝนและการผลิตน้ำมันดินทางอุตสาหกรรมได้เริ่มขึ้นแล้วตาม GOST ใหม่

ปริมาณการขายปลีกที่ปั๊มน้ำมัน Bashneft ในช่วง 11 เดือนของปี 2561 เพิ่มขึ้น 13.2% เมื่อเทียบกับช่วงเดียวกันของปีที่แล้วและอยู่ที่ 1.7 ล้านตัน

เพื่อดำเนินการตามกลยุทธ์ปิโตรเคมี การผลิตปิโตรเคมีจึงได้รับความทันสมัย ดังนั้นในเดือนพฤษภาคม 2018 Ufaorgsintez จึงเริ่มดำเนินการ การติดตั้งใหม่การผลิตคิวมีน - วัตถุดิบสำหรับการผลิตสี ตัวทำละลาย โพลีเมอร์ต่างๆ ที่ใช้ในอุตสาหกรรมยานยนต์ ยา และเภสัชวิทยา ลำดับถัดไปคือการบูรณะศูนย์การผลิตอะโรเมติกส์ที่ Ufaneftekhim และการก่อสร้างโรงงานผลิตโอเลฟินแห่งใหม่ที่ Ufaorgsintez

กำไรจากการดำเนินงานรวมสำหรับ 9 เดือนปี 2561 เพิ่มขึ้น 22.6 เปอร์เซ็นต์เมื่อเทียบกับช่วงเดียวกันของปี 2560 และมีมูลค่า 135.5 พันล้านรูเบิล กำไรสุทธิของ Bashneft อยู่ที่ 74.6 พันล้านรูเบิล ซึ่งสูงกว่าปีที่แล้วถึง 73.5 เปอร์เซ็นต์

ในช่วงไตรมาสที่สาม Bashneft จ่ายเงินปันผลให้ผู้ถือหุ้นตามประกาศในการประชุมประจำปีในเดือนมิถุนายน 2561 เป็นจำนวน 28.2 พันล้านรูเบิลและปริมาณเงินปันผลทั้งหมดที่จ่ายตั้งแต่ต้นปีมีจำนวน 43 พันล้านรูเบิล

ในเวลาเดียวกัน ระดับหนี้สุทธิของบริษัทลดลงและ ณ วันที่ 30 กันยายน 2018 มีจำนวน 40.1 พันล้านรูเบิล (ณ วันเดียวกันในปี 2560 ตัวเลขนี้อยู่ที่ 104.7 พันล้านรูเบิล)

ในเวลาเดียวกันในช่วงระยะเวลารายงาน เงินสมทบภาษีในงบประมาณของ Bashkortostan โดยคำนึงถึงการจ่ายภาษีเงินได้ครั้งเดียวเพิ่มขึ้น 1.5 เท่าเมื่อเทียบกับช่วงเดียวกันของปีที่แล้วและมีจำนวน 50.5 พันล้านรูเบิล

ภาพ HTMLเพิ่มไปยังหน้าเว็บโดยใช้แท็ก - การใช้กราฟิกทำให้หน้าเว็บดูน่าดึงดูดยิ่งขึ้น รูปภาพช่วยถ่ายทอดสาระสำคัญและเนื้อหาของเอกสารเว็บได้ดียิ่งขึ้น

การใช้แท็ก HTML และ สามารถสร้างได้ แผนที่ภาพพร้อมพื้นที่แอคทีฟ

การแทรกรูปภาพลงในเอกสาร HTML

1. แท็ก

องค์ประกอบ แสดงถึงรูปภาพและเนื้อหาทางเลือกซึ่งเพิ่มโดยใช้แอตทริบิวต์ alt ตั้งแต่ธาตุ เป็นตัวพิมพ์เล็ก แนะนำให้วางไว้ในองค์ประกอบบล็อก เช่น

หรือ

.

แท็ก มีแอตทริบิวต์ src ที่จำเป็นซึ่งค่าเป็นเส้นทางสัมบูรณ์หรือสัมพัทธ์ไปยังรูปภาพ:

สำหรับแท็ก มีแอตทริบิวต์ต่อไปนี้:

ตารางที่ 1. แอ็ตทริบิวต์แท็ก
คุณลักษณะ คำอธิบาย ค่าที่ยอมรับ
ทางเลือกอื่น แอตทริบิวต์ alt จะเพิ่มข้อความแสดงแทนลงในรูปภาพ แสดงตำแหน่งที่รูปภาพปรากฏก่อนโหลดหรือเมื่อปิดใช้งานกราฟิก และยังแสดงเป็นคำแนะนำเครื่องมือเมื่อวางเมาส์ไว้เหนือรูปภาพ
ไวยากรณ์: alt="image description" . !}
ครอสออริจิน แอตทริบิวต์ crossorigin ช่วยให้คุณโหลดรูปภาพจากทรัพยากรบนโดเมนอื่นโดยใช้คำขอ CORS ภาพที่โหลดลงในแคนวาสโดยใช้คำขอ CORS สามารถนำมาใช้ซ้ำได้ ค่าที่อนุญาต:
ไม่ระบุชื่อ - คำขอข้ามแหล่งกำเนิดถูกสร้างขึ้นโดยใช้ส่วนหัว HTTP และไม่มีการส่งข้อมูลรับรอง หากเซิร์ฟเวอร์ไม่ได้ให้ข้อมูลประจำตัวแก่เซิร์ฟเวอร์ที่มีการร้องขอเนื้อหา รูปภาพจะเสียหายและการใช้งานจะถูกจำกัด
use-credentials - คำขอ Cross-origin ดำเนินการโดยการส่งผ่านข้อมูลรับรอง
ไวยากรณ์: crossorigin="anonymous"
ความสูง คุณลักษณะ height ระบุความสูงของภาพ สามารถระบุเป็น px หรือ % ได้
ไวยากรณ์: ความสูง: 300px
อิสแมป คุณลักษณะ ismap ระบุว่ารูปภาพเป็นส่วนหนึ่งของภาพแผนที่ที่อยู่บนเซิร์ฟเวอร์ (ภาพแผนที่คือภาพที่มีพื้นที่ที่สามารถคลิกได้) เมื่อคุณคลิกที่ภาพแผนที่ พิกัดจะถูกส่งไปยังเซิร์ฟเวอร์เป็นสตริงการสืบค้น URL แอตทริบิวต์ ismap จะได้รับอนุญาตเฉพาะในกรณีที่องค์ประกอบ เป็นผู้สืบทอดของธาตุ ด้วยแอตทริบิวต์ href ที่ถูกต้อง
ไวยากรณ์: ismap
ยาว URL คำอธิบายรูปภาพแบบขยายที่เสริมแอตทริบิวต์ alt
ไวยากรณ์: longdesc="http://www.example.com/description.txt"
src แอตทริบิวต์ src ระบุเส้นทางไปยังรูปภาพ
ไวยากรณ์: src="flower.jpg"
ขนาด ตั้งค่าขนาดภาพขึ้นอยู่กับตัวเลือกการแสดงผล ใช้งานได้เฉพาะเมื่อมีการระบุแอตทริบิวต์ srcset ค่าแอตทริบิวต์คือหนึ่งสตริงขึ้นไป คั่นด้วยเครื่องหมายจุลภาค
srcset สร้างรายการแหล่งรูปภาพที่จะเลือกตามความละเอียดของหน้าจอ สามารถใช้ร่วมกับหรือแทนแอตทริบิวต์ src ได้ ค่าแอตทริบิวต์คือหนึ่งสตริงขึ้นไป คั่นด้วยเครื่องหมายจุลภาค
แผนที่การใช้งาน แอตทริบิวต์ usemap ระบุรูปภาพเป็นแผนที่รูปภาพ ค่าต้องขึ้นต้นด้วยสัญลักษณ์ # ค่านี้เชื่อมโยงกับค่าของชื่อแท็กหรือแอตทริบิวต์ id และสร้างการเชื่อมโยงระหว่างองค์ประกอบต่างๆ และ - ไม่สามารถใช้แอตทริบิวต์ได้หากองค์ประกอบ เป็นผู้สืบทอดของธาตุ หรือ
ความกว้าง แอตทริบิวต์ width ระบุความกว้างของรูปภาพ สามารถระบุเป็น px หรือ % ได้
ไวยากรณ์: ความกว้าง: 100%

1.1. ที่อยู่รูปภาพ

ที่อยู่รูปภาพสามารถระบุได้แบบเต็ม (URL สัมบูรณ์) เช่น:
URL (http://anysite.ru/images/anyphoto.png)

หรือผ่านทางเส้นทางสัมพัทธ์จาก เอกสารหรือ ไดเรกทอรีรากเว็บไซต์:
url(../images/anyphoto.png) - เส้นทางสัมพันธ์จากเอกสาร
url(/images/anyphoto.png) - เส้นทางสัมพันธ์จากไดเรกทอรีราก

สิ่งนี้ถูกตีความดังนี้:
../ - หมายถึงขึ้นไปหนึ่งระดับไปยังไดเร็กทอรีราก
รูปภาพ/ - ไปที่โฟลเดอร์ที่มีรูปภาพ
anyphoto.png - ชี้ไปที่ไฟล์รูปภาพ

1.2. ขนาดภาพ

โดยไม่ต้องตั้งค่าขนาดภาพ ภาพวาดจะแสดงบนหน้าตามขนาดจริง คุณสามารถแก้ไขขนาดของรูปภาพได้โดยใช้แอตทริบิวต์ความกว้างและความสูง หากระบุแอตทริบิวต์เพียงรายการเดียว คุณลักษณะที่สองจะถูกคำนวณโดยอัตโนมัติเพื่อรักษาสัดส่วนของรูปวาด

1.3. รูปแบบไฟล์กราฟิก

รูปแบบ JPEG (กลุ่มผู้เชี่ยวชาญด้านการถ่ายภาพร่วม)- ภาพ JPEG เหมาะสำหรับภาพถ่ายและสามารถมีสีต่างๆ ได้หลายล้านสี รูปภาพบีบอัดได้ดีกว่า GIF แต่ข้อความและพื้นที่ขนาดใหญ่ที่เป็นสีทึบอาจดูไม่เป็นระเบียบ

รูปแบบ GIF (รูปแบบการแลกเปลี่ยนกราฟิก)- เหมาะสำหรับการบีบอัดรูปภาพที่มีพื้นที่สีทึบ เช่น โลโก้ GIF ช่วยให้คุณตั้งค่าสีใดสีหนึ่งให้โปร่งใสได้ ทำให้พื้นหลังของหน้าเว็บแสดงผ่านส่วนหนึ่งของรูปภาพได้ GIF ยังสามารถรวมภาพเคลื่อนไหวแบบง่ายๆ ได้ด้วย รูปภาพ GIF มีเพียง 256 เฉดสี ซึ่งทำให้รูปภาพดูมีรอยเปื้อนและเป็นสีที่ไม่สมจริงเหมือนโปสเตอร์

รูปแบบ PNG (กราฟิกเครือข่ายแบบพกพา)- รวมคุณสมบัติที่ดีที่สุดของรูปแบบ GIF และ JPEG ประกอบด้วย 256 สีและทำให้สามารถทำให้สีใดสีหนึ่งโปร่งใสได้ ในขณะที่บีบอัดรูปภาพให้มีขนาดเล็กกว่าไฟล์ GIF

รูปแบบ APNG (กราฟิกเครือข่ายแบบพกพาแบบเคลื่อนไหว)- รูปแบบภาพตามรูปแบบ PNG ช่วยให้คุณสามารถจัดเก็บภาพเคลื่อนไหวและยังรองรับความโปร่งใส

รูปแบบ SVG (กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้)- การวาดภาพ SVG ประกอบด้วยชุดรูปทรงเรขาคณิตที่อธิบายในรูปแบบ XML: เส้น วงรี รูปหลายเหลี่ยม ฯลฯ รองรับทั้งกราฟิกแบบคงที่และภาพเคลื่อนไหว ชุดฟังก์ชันประกอบด้วยการแปลงต่างๆ อัลฟ่ามาสก์ เอฟเฟกต์ฟิลเตอร์ และความสามารถในการใช้เทมเพลต ภาพ SVG สามารถปรับขนาดได้โดยไม่สูญเสียคุณภาพ

รูปแบบบีเอ็มพี (รูปภาพบิตแมป)- เป็นรูปภาพบิตแมปที่ไม่มีการบีบอัด (ต้นฉบับ) ซึ่งมีเทมเพลตเป็นตารางพิกเซลสี่เหลี่ยม ไฟล์บิตแมปประกอบด้วยส่วนหัว จานสี และข้อมูลกราฟิก ส่วนหัวเก็บข้อมูลเกี่ยวกับภาพกราฟิกและไฟล์ (ความลึกของพิกเซล ความสูง ความกว้าง และจำนวนสี) จานสีจะแสดงเฉพาะในไฟล์บิตแมปที่มีภาพจานสี (8 บิตหรือน้อยกว่า) และประกอบด้วยองค์ประกอบไม่เกิน 256 รายการ ข้อมูลกราฟิกแสดงถึงรูปภาพนั้นเอง ความลึกของสีในรูปแบบนี้สามารถเป็น 1, 2, 4, 8, 16, 24, 32, 48 บิตต่อพิกเซล

รูปแบบ ICO (ไอคอนวินโดวส์)- รูปแบบการจัดเก็บไฟล์ไอคอนใน Microsoft Windows นอกจากนี้ ไอคอน Windows ยังใช้เป็นไอคอนบนเว็บไซต์บนอินเทอร์เน็ตอีกด้วย เป็นรูปภาพรูปแบบนี้ที่แสดงถัดจากที่อยู่เว็บไซต์หรือบุ๊กมาร์กในเบราว์เซอร์ ไฟล์ ICO หนึ่งไฟล์ประกอบด้วยไอคอนตั้งแต่หนึ่งไอคอนขึ้นไป โดยสามารถตั้งค่าขนาดและสีของแต่ละไอคอนแยกกันได้ ขนาดไอคอนสามารถเป็นขนาดใดก็ได้ แต่ขนาดที่พบบ่อยที่สุดคือไอคอนสี่เหลี่ยมจัตุรัสที่มีด้าน 16, 32 และ 48 พิกเซล

2. แท็ก

แท็ก ทำหน้าที่นำเสนอภาพกราฟิกในรูปแบบแผนที่พร้อมพื้นที่ใช้งาน ฮอตสปอตจะถูกระบุโดยการเปลี่ยนแปลงรูปลักษณ์ของเคอร์เซอร์เมาส์เมื่อเลื่อนเมาส์ไปเหนือ เมื่อคลิกที่พื้นที่ใช้งาน ผู้ใช้สามารถนำทางไปยังเอกสารที่เกี่ยวข้องได้

แท็ก มีแอตทริบิวต์ name ซึ่งระบุชื่อของแผนที่ ค่าของแอตทริบิวต์ชื่อสำหรับแท็ก ต้องตรงกับชื่อในแอตทริบิวต์ usemap ขององค์ประกอบ :

...

องค์ประกอบ ประกอบด้วยองค์ประกอบจำนวนหนึ่ง กำหนดพื้นที่โต้ตอบในภาพแผนที่

3. แท็ก

แท็ก อธิบายภูมิภาคที่ใช้งานเพียงแห่งเดียวซึ่งเป็นส่วนหนึ่งของแผนที่รูปภาพฝั่งไคลเอ็นต์ องค์ประกอบไม่มีแท็กปิด หากพื้นที่ใช้งานหนึ่งซ้อนทับกับอีกพื้นที่หนึ่ง ลิงก์แรกจากรายการพื้นที่จะถูกนำมาใช้

ตารางที่ 2. แอ็ตทริบิวต์แท็ก
คุณลักษณะ คำอธิบายสั้น ๆ
ทางเลือกอื่น ตั้งค่าข้อความแสดงแทนสำหรับพื้นที่แผนที่ที่ใช้งานอยู่
พิกัด กำหนดตำแหน่งของพื้นที่บนหน้าจอ พิกัดระบุเป็นหน่วยความยาวและคั่นด้วยเครื่องหมายจุลภาค:
สำหรับ วงกลม- พิกัดศูนย์กลางและรัศมีของวงกลม
สำหรับ สี่เหลี่ยมผืนผ้า- พิกัดมุมซ้ายบนและมุมขวาล่าง
สำหรับ รูปหลายเหลี่ยม— พิกัดของจุดยอดรูปหลายเหลี่ยมตามลำดับที่ต้องการ แนะนำให้ระบุพิกัดสุดท้ายซึ่งเท่ากับพิกัดแรกเพื่อความสมบูรณ์ของรูป
ดาวน์โหลด เสริมแอตทริบิวต์ href และบอกเบราว์เซอร์ว่าควรโหลดทรัพยากรทันทีที่ผู้ใช้คลิกลิงก์ แทนที่จะต้องเปิดก่อน (เช่น ไฟล์ PDF) โดยการระบุชื่อสำหรับแอตทริบิวต์ เรากำลังตั้งชื่อให้กับวัตถุที่โหลด อนุญาตให้ใช้แอตทริบิวต์โดยไม่ต้องระบุค่าของมัน
href ระบุ URL สำหรับลิงก์ สามารถระบุที่อยู่ลิงก์แบบสัมบูรณ์หรือแบบสัมพันธ์ได้
hreflang ระบุภาษาของเอกสารเว็บที่เกี่ยวข้อง ใช้ร่วมกับแอตทริบิวต์ href เท่านั้น ค่าที่ยอมรับคือตัวย่อที่ประกอบด้วยตัวอักษรคู่หนึ่งที่ระบุรหัสภาษา
สื่อ กำหนดประเภทของอุปกรณ์ที่จะปรับให้เหมาะสมสำหรับไฟล์ ค่านี้สามารถเป็นคิวรีสื่อใดก็ได้
ญาติ ขยายแอตทริบิวต์ href ด้วยข้อมูลเกี่ยวกับความสัมพันธ์ระหว่างเอกสารปัจจุบันและเอกสารที่เกี่ยวข้อง ค่าที่ยอมรับ:
ทางเลือก - ลิงก์ไปยังเอกสารเวอร์ชันอื่น (เช่น รูปแบบหน้ากระดาษ การแปล หรือมิเรอร์)
ผู้เขียน — ลิงก์ไปยังผู้เขียนเอกสาร
บุ๊กมาร์ก - URL ถาวรที่ใช้สำหรับบุ๊กมาร์ก
ความช่วยเหลือ - ลิงก์ไปยังความช่วยเหลือ
ใบอนุญาต - ลิงก์ไปยังข้อมูลลิขสิทธิ์สำหรับเอกสารเว็บนี้
ถัดไป/ก่อนหน้า - ระบุความสัมพันธ์ระหว่าง URL แต่ละรายการ ด้วยมาร์กอัปนี้ Google สามารถระบุได้ว่าเนื้อหาของหน้าเหล่านี้เกี่ยวข้องกันในลำดับเชิงตรรกะ
nofollow - ป้องกันไม่ให้เครื่องมือค้นหาติดตามลิงก์ในหน้าใดหน้าหนึ่งหรือลิงก์ใดลิงก์หนึ่ง
noreferrer - ระบุว่าเมื่อติดตามลิงก์ เบราว์เซอร์ไม่ควรส่งส่วนหัวคำขอ HTTP (ผู้อ้างอิง) ซึ่งจะบันทึกข้อมูลเกี่ยวกับหน้าที่ผู้เยี่ยมชมไซต์มาจาก
ดึงข้อมูลล่วงหน้า - ระบุว่าควรแคชเอกสารเป้าหมาย เช่น เบราว์เซอร์ในพื้นหลังจะดาวน์โหลดเนื้อหาของหน้าไปยังแคช
ค้นหา - ระบุว่าเอกสารเป้าหมายมีเครื่องมือค้นหา
แท็ก - ระบุคำสำคัญสำหรับเอกสารปัจจุบัน
รูปร่าง ระบุรูปร่างของพื้นที่ที่ใช้งานอยู่บนแผนที่และพิกัด สามารถรับค่าต่อไปนี้:
สี่เหลี่ยมผืนผ้า - พื้นที่ใช้งานเป็นรูปสี่เหลี่ยมผืนผ้า
วงกลม — พื้นที่ใช้งานในรูปของวงกลม
โพลี — พื้นที่ใช้งานในรูปของรูปหลายเหลี่ยม;
ค่าเริ่มต้น - พื้นที่ใช้งานจะครอบครองพื้นที่ทั้งหมดของภาพ
เป้า ระบุตำแหน่งที่จะดาวน์โหลดเอกสารเมื่อมีการคลิกลิงก์ รับค่าต่อไปนี้:
_self — เพจถูกโหลดเข้าสู่หน้าต่างปัจจุบัน
_blank — หน้าจะเปิดขึ้นในหน้าต่างเบราว์เซอร์ใหม่
_parent — เพจถูกโหลดลงในเฟรมพาเรนต์
_top - หน้าเว็บโหลดในหน้าต่างเบราว์เซอร์แบบเต็ม
พิมพ์ ระบุประเภท MIME ของไฟล์ลิงก์ เช่น นามสกุลไฟล์.

4. ตัวอย่างการสร้างแผนที่รูปภาพ

1) ทำเครื่องหมายภาพต้นฉบับในพื้นที่ใช้งานของรูปร่างที่ต้องการ พิกัดของพื้นที่สามารถคำนวณได้โดยใช้โปรแกรมประมวลผลภาพถ่าย เช่น อะโดบี โฟโต้ช็อปหรือ สี.


ข้าว. 1. ตัวอย่างมาร์กอัปรูปภาพเพื่อสร้างแผนที่

2) ตั้งชื่อการ์ดโดยเพิ่มลงในแท็ก โดยใช้แอตทริบิวต์ชื่อ เรากำหนดค่าเดียวกันกับแอตทริบิวต์ usemap ของแท็ก .

Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers"> !} เยอบีร่า ผักตบชวา ดอกคาโมไมล์ ทิวลิป
ข้าว. 2. ตัวอย่างการสร้างแผนผังรูปภาพ เมื่อคุณคลิกเคอร์เซอร์บนดอกไม้ คุณจะไปที่หน้าพร้อมคำอธิบาย

กราฟิกแบบเวกเตอร์ใช้กันอย่างแพร่หลายในการพิมพ์ แต่เรายังใช้กับเว็บไซต์ที่ใช้ SVG ได้ ( กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ - กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้)- ตาม ข้อกำหนดของ W3.org กำหนด SVG เป็น:

ภาษาสำหรับอธิบายกราฟิกสองมิติในรูปแบบ XML SVG อนุญาตให้มีวัตถุสามประเภท: กราฟิกแบบเวกเตอร์ (เช่น เส้นทางที่ประกอบด้วยเส้นตรงและเส้นโค้ง) รูปภาพ และข้อความ

แม้ว่า SVG จะถูกรวมไว้ในคำแนะนำของ W3C ตั้งแต่เดือนสิงหาคม 2554 เทคโนโลยีนี้ในทางปฏิบัติแล้วไม่ได้ใช้ในโครงการเว็บถึงแม้ว่าจะมีข้อได้เปรียบเหนือภาพแรสเตอร์หลายประการก็ตาม ในชุดบทเรียนนี้ เราจะแนะนำวิธีการทำงานกับองค์ประกอบ SVG บนหน้าเว็บ

ข้อดีของ SVG

ความละเอียดอิสระ

ภาพแรสเตอร์ขึ้นอยู่กับความละเอียด กราฟิกจะมีรูปลักษณ์ที่ไม่ปรากฏเมื่อปรับขนาดเป็นระดับหนึ่ง ด้วยกราฟิกแบบเวกเตอร์ โดยหลักการแล้วสถานการณ์นี้เป็นไปไม่ได้ เนื่องจากทุกอย่างแสดงด้วยนิพจน์ทางคณิตศาสตร์ที่คำนวณใหม่โดยอัตโนมัติเมื่อมีการเปลี่ยนแปลงมาตราส่วน และคุณภาพจะยังคงอยู่ในทุกสภาวะ

การลดจำนวนคำขอ HTTP

สามารถฝัง SVG ได้โดยตรง เอกสาร HTMLโดยใช้แท็ก svg ดังนั้นเบราว์เซอร์จึงไม่จำเป็นต้องมีคำขอเพื่อแสดงกราฟิก วิธีการนี้มีผลดีต่อลักษณะการโหลดของเว็บไซต์

สไตล์และสคริปต์

การฝังแท็ก svg ยังช่วยให้จัดสไตล์กราฟิกของคุณโดยใช้ CSS ได้อย่างง่ายดาย คุณสามารถเปลี่ยนคุณสมบัติของวัตถุได้ เช่น สีพื้นหลัง ความโปร่งใส เส้นขอบ และอื่นๆ กราฟิกสามารถจัดการได้ในลักษณะเดียวกันโดยใช้ JavaScript

แก้ไขและสร้างภาพเคลื่อนไหวได้ง่าย

วัตถุ SVG สามารถสร้างภาพเคลื่อนไหวได้โดยใช้ CSS หรือ JavaScript นอกจากนี้ยังสามารถแก้ไขวัตถุ SVG ได้โดยใช้ โปรแกรมแก้ไขข้อความ.

ขนาดไฟล์เล็กลง

SVG มีขนาดไฟล์เล็กกว่าเมื่อเทียบกับกราฟิกแรสเตอร์

รูปร่าง SVG พื้นฐาน

ตามข้อกำหนด เราสามารถวาดรูปทรงพื้นฐานได้หลายรูปร่าง: เส้น เส้นหลายเส้น สี่เหลี่ยมผืนผ้า วงกลม วงรี ต้องแทรกองค์ประกอบทั้งหมดลงในแท็ก ... - มาดูรายละเอียดองค์ประกอบพื้นฐานกัน

เส้น

หากต้องการแสดงเส้นใน SVG ให้ใช้องค์ประกอบ - เขาวาดส่วนที่ต้องกำหนดสองจุด: จุดเริ่มต้นและจุดสิ้นสุด

จุดเริ่มต้นของเซ็กเมนต์ถูกกำหนดโดยแอตทริบิวต์ x1 และ y1 และจุดสิ้นสุดถูกกำหนดโดยพิกัดในแอตทริบิวต์ x2 และ y2

นอกจากนี้ยังมีแอตทริบิวต์อื่นอีกสองรายการ (เส้นขีดและความกว้างเส้นโครงร่าง) ที่ใช้ในการกำหนดสีและความกว้างของเส้นตามลำดับ

วัตถุนี้มีความคล้ายคลึงกับ แต่ใช้องค์ประกอบ คุณสามารถวาดเส้นได้หลายเส้นในคราวเดียว

องค์ประกอบ ประกอบด้วยแอตทริบิวต์ point ซึ่งใช้เพื่อระบุพิกัดของจุด

สี่เหลี่ยมถูกวาดโดยใช้องค์ประกอบ - คุณต้องกำหนดความกว้างและความสูง

ในการแสดงวงกลมเราใช้องค์ประกอบ - ในตัวอย่างต่อไปนี้ เราสร้างวงกลมที่มีรัศมี 100 ซึ่งกำหนดไว้ในแอตทริบิวต์ r:

คุณลักษณะสองรายการแรก cx และ cy กำหนดพิกัดของศูนย์กลาง ในตัวอย่างข้างต้น เราได้ตั้งค่า 102 สำหรับทั้งสองพิกัด ค่าเริ่มต้นคือ 0

ในการแสดงวงรีเราใช้องค์ประกอบ - มันทำงานเหมือนกับวงกลม แต่เราสามารถระบุรัศมี x และ y โดยเฉพาะได้โดยใช้แอตทริบิวต์ rx และ ry:

องค์ประกอบ แสดงรูปทรงหลายเหลี่ยม เช่น สามเหลี่ยม หกเหลี่ยม ฯลฯ ตัวอย่างเช่น:

การใช้โปรแกรมแก้ไขกราฟิกแบบเวกเตอร์

การส่งออกวัตถุ SVG แบบธรรมดาไปยัง HTML เป็นเรื่องง่าย อย่างไรก็ตาม เมื่อความซับซ้อนของวัตถุเพิ่มขึ้น การปฏิบัตินี้อาจนำไปสู่งานจำนวนมากที่ต้องใช้

แต่คุณสามารถใช้โปรแกรมแก้ไขกราฟิกแบบเวกเตอร์ใดก็ได้ (เช่น อะโดบี อิลลัสเตรเตอร์ หรือ อิงค์สเคป) เพื่อสร้างวัตถุ หากคุณมีเครื่องมือเช่นนี้ การวาดวัตถุที่จำเป็นในวัตถุเหล่านั้นจะง่ายกว่าการเข้ารหัสกราฟิกในแท็ก HTML

คุณสามารถคัดลอกคำสั่งกราฟิกแบบเวกเตอร์จากไฟล์ลงในเอกสาร HTML ได้ หรือคุณสามารถฝังไฟล์ .svg โดยใช้องค์ประกอบอย่างใดอย่างหนึ่งต่อไปนี้: embed , iframe และ object

ผลลัพธ์จะเหมือนกัน

รองรับเบราว์เซอร์

SVG มี การสนับสนุนที่ดีในส่วนใหญ่ เบราว์เซอร์ที่ทันสมัยยกเว้น IE เวอร์ชัน 8 และเก่ากว่า แต่ปัญหาสามารถแก้ไขได้โดยใช้ไลบรารี JavaScript เพื่อให้งานของคุณง่ายขึ้น คุณสามารถใช้เครื่องมือ ReadySetRaphael.com เพื่อแปลงโค้ด SVG เป็นรูปแบบ Raphael

ขั้นแรก เราดาวน์โหลดและรวมไลบรารีไว้ในเอกสาร HTML จากนั้นเราโหลดไฟล์ .svg คัดลอกและวางโค้ดผลลัพธ์ลงในฟังก์ชันหลังจากโหลด:

ในแท็ก body เราวางองค์ประกอบ div ต่อไปนี้พร้อมกับตัวระบุ rsr

และทุกอย่างก็พร้อม

ในบทช่วยสอนถัดไปของชุดนี้ เราจะดูวิธีจัดสไตล์วัตถุ SVG ใน CSS

กราฟิกแบบเวกเตอร์ใช้กันอย่างแพร่หลายในสื่อสิ่งพิมพ์ สำหรับเว็บไซต์ ที่นี่เรายังสามารถใช้กราฟิกแบบเวกเตอร์ผ่าน SVG หรือ Scalable Vector Graphics ได้ด้วย กราฟิกแบบเวกเตอร์- ข้อกำหนดอย่างเป็นทางการของ W3.org อธิบายไว้ดังนี้:

ภาษาสำหรับอธิบายกราฟิกสองมิติโดยใช้ XML SVG อนุญาตให้เราใช้สามประเภท วัตถุกราฟิก: รูปร่างกราฟิกแบบเวกเตอร์ (เช่น เส้นทางที่ประกอบด้วยเส้นตรงและเส้นโค้ง) รูปภาพ และข้อความ

เทคโนโลยีนี้มีให้บริการมาตั้งแต่ปี 2542 และเมื่อวันที่ 16 สิงหาคม 2554 ได้รวมอยู่ในรายการคำแนะนำของ W3C อย่างไรก็ตาม SVG ยังคงไม่ได้ใช้บ่อยนัก แม้ว่าจะมีข้อดีหลายประการของการใช้กราฟิกแบบเวกเตอร์แทนกราฟิกแรสเตอร์ก็ตาม

ประโยชน์ของกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้

ในแง่ของการใช้กราฟิกบนหน้าเว็บไซต์ กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ทำให้เรามีข้อได้เปรียบเหนือกราฟิกแรสเตอร์หลายประการ ซึ่งรวมถึง:

ความละเอียดที่เป็นอิสระ

กราฟิกแรสเตอร์ (หรือบิตแมป) ขึ้นอยู่กับความละเอียดเนื่องจากสร้างขึ้นโดยใช้พิกเซล หากองค์ประกอบกราฟิกดังกล่าวขยายใหญ่ขึ้น สี่เหลี่ยมขนาดใหญ่จะมองเห็นได้ทันที สิ่งนี้ไม่ได้เกิดขึ้นกับกราฟิกแบบเวกเตอร์ เนื่องจากไม่ได้ขึ้นอยู่กับความละเอียด แต่สร้างขึ้นจากการคำนวณทางคณิตศาสตร์แทน ซึ่งช่วยให้เราสามารถเพิ่มขนาดใดก็ได้โดยไม่สูญเสียคุณภาพ

การลดคำขอ HTTP

กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้สามารถฝังลงในเอกสาร HTML ได้โดยตรงโดยใช้แท็ก svg เพื่อให้เบราว์เซอร์ไม่จำเป็นต้องส่งคำขอเพิ่มเติมสำหรับกราฟิก นอกจากนี้ยังส่งผลดีต่อประสิทธิภาพของเว็บไซต์อีกด้วย

การจัดสไตล์และการเขียนสคริปต์

การบูรณาการโดยตรงโดยใช้แท็ก svg จะช่วยให้เราปรับแต่งกราฟิกได้เมื่อใด ความช่วยเหลือเกี่ยวกับ CSS- เราสามารถเปลี่ยนพารามิเตอร์ของวัตถุ เช่น สีพื้นหลัง ความทึบ เส้นขอบ และอื่นๆ ได้ เช่นเดียวกับใน HTML เรายังสามารถควบคุมกราฟิกโดยใช้จาวาสคริปต์

ความเป็นไปได้ของภาพเคลื่อนไหวและการแก้ไข

วัตถุ SVG สามารถสร้างภาพเคลื่อนไหวได้โดยใช้องค์ประกอบภาพเคลื่อนไหว หรือใช้ไลบรารี JS เช่น jQuery วัตถุ SVG ยังสามารถแก้ไขได้โดยใช้โปรแกรมแก้ไขข้อความหรือซอฟต์แวร์กราฟิก เช่น (ฟรี) หรือ .

ขนาดไฟล์เล็กลง

SVG มีขนาดไฟล์เล็กกว่าเมื่อเทียบกับกราฟิกแรสเตอร์

การวาดรูปร่างอย่างง่ายโดยใช้ SVG

ตามข้อกำหนด เราสามารถวาดสิ่งต่างๆ เช่น รูปหลายเหลี่ยม วงกลม เส้น หรือวงรีโดยใช้ SVG และเพื่อให้เบราว์เซอร์สร้างกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ องค์ประกอบกราฟิกทั้งหมดเหล่านี้จะต้องวางไว้ภายในแท็ก "svg" ลองมาดูตัวอย่างด้านล่าง:

เส้น

หากต้องการวาดเส้นโดยใช้ SVG เราสามารถใช้องค์ประกอบ "เส้น" องค์ประกอบนี้ใช้ในการวาดเส้นตรงเส้นเดียว ดังนั้นจึงมีเพียงสองจุดเท่านั้น คือ จุดเริ่มต้นและจุดสิ้นสุด




ดังที่คุณเห็นข้างต้น พิกัดของจุดเริ่มต้นของเส้นถูกระบุไว้ในแอตทริบิวต์ 2 รายการแรก x1 และ x2 และพิกัดของจุดสิ้นสุดจะถูกระบุโดยคุณลักษณะ y1 และ y2

นอกจากนี้ยังมีคุณลักษณะอื่นๆ อีกสองประการที่นี่: เส้นขีดและความกว้างของเส้นโครงร่าง ซึ่งควบคุมสีและความกว้างของเส้นขอบ ในทางกลับกัน เรายังสามารถกำหนดคุณลักษณะเหล่านี้ในรูปแบบอินไลน์ได้ เช่นนี้

Style="ความกว้างของเส้นขีด:1; เส้นขีด:rgb(0,0,0);"
และนี่จะให้ผลลัพธ์เดียวกันแก่เรา


*

เส้นขาด

ทุกอย่างที่นี่คล้ายกับ "เส้น" มาก แต่ด้วยองค์ประกอบ "เส้นหลายเส้น" ทำให้เราสามารถวาดเส้นได้หลายเส้นแทนที่จะเป็นเพียงเส้นเดียว นี่คือตัวอย่าง:




องค์ประกอบ "เส้นหลายเส้น" มีแอตทริบิวต์จุดที่มีพิกัดทั้งหมดของเส้น


*

สี่เหลี่ยมผืนผ้า

เราสามารถวาดรูปสี่เหลี่ยมได้อย่างง่ายดายเหมือนกัน เพียงใช้องค์ประกอบ "rect" เท่านั้น เราเพียงแค่ต้องระบุความกว้างและความสูง:





*

วงกลม

นอกจากนี้เรายังสามารถวาดวงกลมโดยใช้องค์ประกอบ "วงกลม" ในตัวอย่างนี้ เราจะวาดวงกลมที่มีรัศมี 100 ซึ่งกำหนดโดยแอตทริบิวต์ r:




คุณลักษณะสองรายการแรก cx และ cy กำหนดพิกัดกึ่งกลางของวงกลม ในตัวอย่างข้างต้น เราตั้งค่า 102 สำหรับทั้งพิกัด x และ y หากไม่ได้ระบุแอตทริบิวต์เหล่านี้ จะมีค่าเริ่มต้นเป็น 0


*

วงรี

เราสามารถวาดวงรีได้โดยใช้องค์ประกอบ "วงรี" ตรงนี้ ทุกอย่างทำงานในลักษณะเดียวกับวงกลม แต่คราวนี้เราสามารถควบคุมรัศมีเส้น x และรัศมีเส้น y แยกกันผ่านแอตทริบิวต์ rx และ ry





*

รูปหลายเหลี่ยม

ด้วยความช่วยเหลือขององค์ประกอบ "รูปหลายเหลี่ยม" เราสามารถวาดรูปหลายเหลี่ยมรูปร่างที่มีหลายมุมและด้านข้างเช่นสามเหลี่ยมแปดเหลี่ยม ตัวอย่าง:





*

การใช้โปรแกรมแก้ไขกราฟิกแบบเวกเตอร์

อย่างที่คุณเห็น การวาดรูปทรงง่ายๆ โดยใช้ SVG ใน HTML นั้นค่อนข้างง่าย อย่างไรก็ตาม หากเราต้องการวัตถุที่ซับซ้อนกว่านี้ วิธีนี้ก็จะไม่เหมาะกับเราอีกต่อไป

โชคดีที่ดังที่เราได้กล่าวไว้ข้างต้น เราสามารถใช้โปรแกรมแก้ไขกราฟิกแบบเวกเตอร์ เช่น Adobe Illustrator หรือ Inkscape เพื่อทำงานนี้ได้ หากคุณคุ้นเคยกับซอฟต์แวร์นี้ คุณสามารถวาดวัตถุได้อย่างง่ายดายโดยใช้อินเทอร์เฟซที่เป็นมิตรต่อผู้ใช้ แทนที่จะใช้โค้ด HTML

หรือคุณสามารถฝังไฟล์ svg ได้โดยใช้องค์ประกอบอย่างใดอย่างหนึ่งต่อไปนี้: embed, iframe, object


ผลลัพธ์จะคล้ายกัน

ใน ในตัวอย่างนี้เราใช้กับ.


*

รองรับเบราว์เซอร์สำหรับกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้

ในแง่ของการรองรับเบราว์เซอร์ กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้นั้นได้รับการรองรับเป็นอย่างดีอยู่แล้ว ยกเว้น IE8 และรุ่นก่อนหน้า แต่สามารถแก้ไขได้โดยใช้ไลบรารีจาวาสคริปต์ที่เรียกว่า . เพื่อให้สิ่งต่าง ๆ ง่ายขึ้น เราจะใช้เครื่องมือในการแปลงโค้ด SVG ของเราให้เป็นรูปแบบที่ Raphael รองรับ


ในการเริ่มต้น ให้ดาวน์โหลดและรวมไลบรารี Raphael.js ไว้ในโค้ด HTML ของคุณ จากนั้น อัปโหลดไฟล์ svg ไปยังไซต์ คัดลอกและวางโค้ดที่สร้างขึ้นลงในฟังก์ชันโหลดต่อไปนี้:

Window.onload=ฟังก์ชั่น() (
//รหัสราฟาเอลอยู่ที่นี่
}
ภายในแท็ก body ให้แทรก div ต่อไปนี้พร้อมกับแอตทริบิวต์ rsr id


แค่นั้นแหละ! ดูตัวอย่างที่ให้ไว้ในลิงค์ด้านล่าง

สรุปแล้ว

นั่นคือพื้นฐานของ SVG เราหวังว่าคุณจะเข้าใจเรื่องนี้มากขึ้นเล็กน้อย นี่คือหนึ่งใน วิธีที่ดีที่สุดเพิ่มประสิทธิภาพหน้าเว็บของคุณพร้อมทั้งแสดงกราฟิกที่สามารถแสดงผลได้ชัดเจนแม้บนหน้าจอ Retina

ตามปกติ หากคุณสงสัย เราได้เตรียมบทความเพิ่มเติมเล็กๆ น้อยๆ ไว้ให้คุณแล้ว

* (รู้เบื้องต้นเกี่ยวกับ SVG)
* (SVG: อย่าพึ่งความละเอียด)
* (ทำไมไม่ใช้ SVG?)

ขอขอบคุณที่อ่าน และเราหวังว่าคุณจะพบว่าบทความนี้มีประโยชน์!

ความสนใจ! คุณไม่ได้รับอนุญาตให้ดูข้อความที่ซ่อนอยู่