Τα διανυσματικά γραφικά χρησιμοποιούνται ευρέως στην εκτύπωση. Αλλά για ιστότοπους, μπορούμε επίσης να το χρησιμοποιήσουμε με SVG ( Scalable Vector Graphic - κλιμακούμενα διανυσματικά γραφικά). Σύμφωνα με την προδιαγραφή W3.org, το SVG ορίζεται ως:

Μια γλώσσα για την περιγραφή δισδιάστατων γραφικών σε XML. Το SVG επιτρέπει τη χρήση τριών τύπων αντικειμένων: διανυσματικά γραφικά σχήματα (για παράδειγμα, μονοπάτια που αποτελούνται από ευθείες γραμμές και καμπύλες), εικόνες και κείμενο.

Παρόλο που από τον Αύγουστο του 2011 το SVG περιλαμβάνεται στις συστάσεις του W3C, αυτή η τεχνολογίαπρακτικά δεν χρησιμοποιείται σε έργα web, αν και έχει πολλά πλεονεκτήματα σε σχέση με τα bitmaps. Σε αυτήν τη σειρά εκμάθησης, θα εισαγάγουμε τον τρόπο εργασίας με στοιχεία SVG σε ιστοσελίδες.

Οφέλη του SVG

Ψήφισμα Ανεξαρτησία

Οι εικόνες ράστερ εξαρτώνται από την ανάλυση. Τα γραφικά δεν παρουσιάζονται όταν αλλάζει το μέγεθος σε συγκεκριμένες κλίμακες. Με τα διανυσματικά γραφικά, μια τέτοια κατάσταση είναι κατ 'αρχήν αδύνατη, καθώς όλα αντιπροσωπεύονται από μαθηματικές εκφράσεις που υπολογίζονται αυτόματα όταν αλλάζει η κλίμακα και η ποιότητα διατηρείται σε οποιεσδήποτε συνθήκες.

Μείωση του αριθμού των αιτημάτων HTTP

Το SVG μπορεί να ενσωματωθεί απευθείας σε ένα έγγραφο HTML χρησιμοποιώντας την ετικέτα svg, επομένως δεν χρειάζεται να ζητηθεί από το πρόγραμμα περιήγησης να εμφανίσει τα γραφικά. Αυτή η προσέγγιση έχει καλή επίδραση στα χαρακτηριστικά φόρτωσης του ιστότοπου.

Στυλ και σενάρια

Η ενσωμάτωση με την ετικέτα svg διευκολύνει επίσης το στυλ γραφικών χρησιμοποιώντας CSS. Μπορείτε να αλλάξετε τις ιδιότητες των αντικειμένων όπως το χρώμα φόντου, τη διαφάνεια, τα περιγράμματα και ούτω καθεξής. Ομοίως, τα γραφικά μπορούν να χειριστούν με JavaScript.

Εύκολη επεξεργασία και κίνηση

Τα αντικείμενα SVG μπορούν να κινούνται χρησιμοποιώντας CSS ή JavaScript. Επίσης, τα αντικείμενα SVG μπορούν να τροποποιηθούν χρησιμοποιώντας ένα πρόγραμμα επεξεργασίας κειμένου.

Μικρότερο μέγεθος αρχείου

Το SVG έχει μικρότερο μέγεθος αρχείου σε σύγκριση με τα γραφικά ράστερ.

Βασικά σχήματα SVG

Σύμφωνα με τις προδιαγραφές, μπορούμε να σχεδιάσουμε πολλά βασικά σχήματα: γραμμή, πολύγραμμη, ορθογώνιο, κύκλος, έλλειψη. Όλα τα στοιχεία πρέπει να εισαχθούν στην ετικέτα . Εξετάστε τα βασικά στοιχεία λεπτομερώς.

Γραμμή

Ένα στοιχείο χρησιμοποιείται για τη χάραξη μιας γραμμής στο SVG . Σχεδιάζει ένα τμήμα για το οποίο πρέπει να οριστούν δύο σημεία: η αρχή και το τέλος.

Η αρχή του τμήματος ορίζεται από τα χαρακτηριστικά x1 και y1 και το τελικό σημείο ορίζεται από τις συντεταγμένες στα χαρακτηριστικά x2 και y2.

Υπάρχουν επίσης δύο άλλα χαρακτηριστικά (stroke και stroke-width) που χρησιμοποιούνται για τον καθορισμό του χρώματος και του πλάτους της γραμμής, αντίστοιχα.

Αυτό το αντικείμενο είναι παρόμοιο με , αλλά με το στοιχείο Μπορείτε να σχεδιάσετε πολλές γραμμές ταυτόχρονα.

Στοιχείο Περιέχει το χαρακτηριστικό points, το οποίο χρησιμοποιείται για τον καθορισμό των συντεταγμένων των σημείων.

Ορθογώνιο που αποδίδεται με στοιχείο . Πρέπει να ορίσουμε το πλάτος και το ύψος.

Για να σχεδιάσετε έναν κύκλο, χρησιμοποιήστε το στοιχείο . Στο παρακάτω παράδειγμα, δημιουργούμε έναν κύκλο με ακτίνα 100 , που ορίζεται στο χαρακτηριστικό r:

Οι δύο πρώτες ιδιότητες cx και cy ορίζουν τις συντεταγμένες του κέντρου. Στο παραπάνω παράδειγμα, έχουμε ορίσει και τις δύο συντεταγμένες στο 102. Η προεπιλεγμένη τιμή είναι 0.

Για να σχεδιάσετε μια έλλειψη, χρησιμοποιήστε το στοιχείο . Λειτουργεί ακριβώς όπως ένας κύκλος, αλλά μπορούμε να ορίσουμε συγκεκριμένα τις ακτίνες x και y χρησιμοποιώντας τα χαρακτηριστικά rx και ry:

Στοιχείο Εμφανίζει πολυεδρικά σχήματα όπως τρίγωνο, εξάγωνο και ούτω καθεξής. Για παράδειγμα:

Χρήση του προγράμματος επεξεργασίας για διανυσματικά γραφικά

Η απόδοση απλών αντικειμένων SVG σε HTML είναι εύκολη. Ωστόσο, καθώς αυξάνεται η πολυπλοκότητα του αντικειμένου, αυτή η πρακτική μπορεί να οδηγήσει σε μεγάλο όγκο εργασίας που πρέπει να γίνει.

Αλλά μπορείτε να χρησιμοποιήσετε οποιοδήποτε πρόγραμμα επεξεργασίας για διανυσματικά γραφικά (για παράδειγμα, Adobe Illustratorή inkscape) για τη δημιουργία αντικειμένων. Εάν διαθέτετε ένα τέτοιο εργαλείο, είναι πολύ πιο εύκολο να σχεδιάσετε τα απαραίτητα αντικείμενα σε αυτά παρά να κωδικοποιήσετε γραφικά σε μια ετικέτα HTML.

Μπορείτε να αντιγράψετε εντολές για διανυσματικά γραφικά από ένα αρχείο σε ένα έγγραφο HTML. Εναλλακτικά, μπορείτε να ενσωματώσετε το αρχείο .svg χρησιμοποιώντας ένα από τα ακόλουθα στοιχεία: embed , iframe και αντικείμενο .

Το αποτέλεσμα θα είναι το ίδιο.

Υποστήριξη προγράμματος περιήγησης

Το SVG έχει καλή υποστήριξη στα περισσότερα σύγχρονα προγράμματα περιήγησης, με εξαίρεση την έκδοση IE 8 και παλαιότερη. Αλλά η εργασία μπορεί να λυθεί χρησιμοποιώντας τη βιβλιοθήκη JavaScript. Για να διευκολύνετε τα πράγματα, μπορείτε να χρησιμοποιήσετε το εργαλείο ReadySetRaphael.com για να μετατρέψετε τον κώδικα SVG σε μορφή Raphael.

Αρχικά, φορτώνουμε και συμπεριλαμβάνουμε τη βιβλιοθήκη σε ένα έγγραφο HTML. Στη συνέχεια, φορτώνουμε το αρχείο .svg, αντιγράφουμε και επικολλάμε τον κώδικα που προκύπτει στη συνάρτηση μετά τη φόρτωση:

Στην ετικέτα body τοποθετούμε το παρακάτω στοιχείο div με το ID rsr .

Και όλα είναι έτοιμα.

Στο επόμενο σεμινάριο της σειράς, θα εξετάσουμε τον τρόπο δημιουργίας στυλ αντικειμένων SVG σε CSS.

(Επισκόπηση άρθρου μετά το συνέδριο ανάπτυξης λογισμικού στο Yekaterinburg και άλλες παρουσιάσεις. Έκδοση βίντεο της έκθεσης στο Yekaterinburgδείτε το techdays.ru )

Τι είναι το HTML5 Canvas και SVG;

Καμβάς HTML5

– το στοιχείο είναι ένας καμβάς για την απόδοση γραφικών bitmap. Στην πραγματικότητα, αυτό είναι ένα κενό μπλοκ δεδομένων διαστάσεων, στο οποίο μπορείτε να σχεδιάσετε χρησιμοποιώντας ειδικά API για JavaScript.

Το API περιλαμβάνει 45 ειδικές μεθόδους και 21 χαρακτηριστικά που χρησιμοποιούνται για την εμφάνιση αρχέγονων γραφικών, ορισμού στυλ, μετασχηματισμών, πρόσβασης σε μεμονωμένα pixel, εικόνων έργων και βίντεο.

Εγώ ο ίδιος το στοιχείο ορίζεται απευθείας στην προδιαγραφή HTML5. Το API για αυτό περιγράφεται σε ξεχωριστό έγγραφο -- HTML Canvas 2D Context .

SVG

Η μουσική μπορεί να είναι διασκεδαστική

Ένα όμορφο παιχνίδι μουσικής οπτικοποίησης (http://musiccanbefun.edankwan.com/).

Παραδείγματα σχήματος SVG

Διάγραμμα του ανθρώπινου σκελετού, περιοδικός πίνακας χημικών στοιχείων και αναπνευστικό σύστημα (http://ie.microsoft.com/testdrive/Graphics/RealWorldDataAndDiagrams/Default.xhtml).

Χάρτες Yandex

Ένα πιο κοντινό πραγματικό παράδειγμα είναι η χρήση SVG κατά την απόδοση διαδρομών (αν το υποστηρίζει το πρόγραμμα περιήγησης). Δείτε επίσης την ομιλία "Χάρτες και SVG" από το HTML5 Camp μας.

Περισσότερα παραδείγματα:

• Beauty of the Web http://www.beautyofheweb.com/ - πραγματικοί ιστότοποι από τον πραγματικό κόσμο
• Dev: unplugged http://contest.beautyoftheweb.com/ - έργα που συμμετέχουν στον διαγωνισμό εφαρμογών HTML5

Διαφορά μεταξύ Canvas και SVG

Σε διάφορα σενάρια, είτε το Canvas είτε το SVG μπορεί να ταιριάζουν καλύτερα για δυναμική απόδοση γραφικών - θα επιστρέψουμε σε αυτό το θέμα στο τέλος. Εν τω μεταξύ, ας εστιάσουμε στις βασικές διαφορές μεταξύ του ενός και του άλλου:

	Καμβάς	SVG
Μορφή	Ράστερ	Διάνυσμα
Απολέπιση
Πρόσβαση	Μεμονωμένη πρόσβαση Pixel (RGBA)	Πρόσβαση μεμονωμένου στοιχείου (DOM)
Ευρετηρισιμότητα και Προσβασιμότητα	Μόνο το τελικό ράστερ είναι ορατό (δεν μπορείτε να επιλέξετε σχήματα, κείμενο κ.λπ.) - κακό για την Προσβασιμότητα	Μπορείτε να δείτε τη δομή (για παράδειγμα, τραβήξτε ολόκληρο το κείμενο)
Λογοτεχνική συμμόρφωση	Τα οπτικά στυλ ορίζονται κατά την απόδοση μέσω API	Τα οπτικά στυλ ορίζονται από χαρακτηριστικά, μπορείτε να συμπεριλάβετε CSS
Προγραμματισμός	JS API για εργασία με πρωτόγονους	DOM για εργασία με στοιχεία
Εκσυγχρονίζω	Για ενημέρωση - σχεδίαση ή πλήρης επανασχεδιασμός	Είναι δυνατή η αλλαγή μεμονωμένων στοιχείων
Εξελίξεις	Δεν υπάρχει εύκολος τρόπος χειρισμού συμβάντων ποντικιού. Τα αντικείμενα κάτω από τον κέρσορα πρέπει να ορίζονται χειροκίνητα.	Τα συμβάντα από το ποντίκι μέσω του DOM κλείνονται εύκολα, επεξεργάζονται αυτόματα.
Ενσωμάτωση κώδικα	Κώδικας JS ξεχωριστός από τον Καμβά	Μπορείτε να συμπεριλάβετε JS μέσα

Αυτές οι διαφορές πρέπει να λαμβάνονται υπόψη κατά τη χρήση μιας συγκεκριμένης τεχνολογίας για οπτικοποίηση δεδομένων. Για παράδειγμα, η σχεδίαση γραφήματος μιας συνάρτησης μπορεί να είναι ευκολότερη με το Canvas, ενώ η εμφάνιση συμβουλών εργαλείων (με τον ορισμό ενός αντικειμένου κάτω από τον δείκτη του ποντικιού) είναι ευκολότερη με το SVG.

Στην πράξη, ωστόσο, υπάρχει ήδη ένας αριθμός έτοιμων βιβλιοθηκών για οπτικοποίηση δεδομένων που αντισταθμίζουν εν μέρει αυτές τις διαφορές.

Δεν θα μπω στα βασικά της εργασίας με καθεμία από τις τεχνολογίες, ως εισαγωγικό προτείνω την αναφορά του Vadim Makeev (Opera) από το HTML5 Camp «Dynamic Graphics: Canvas and SVG».

Δείτε επίσης αναφορές MIX 2011:

Επεξεργασία εικόνας με καμβά

Ένα από τα αξιοσημείωτα χαρακτηριστικά του Canvas είναι ότι αυτή η τεχνολογία παρέχει πρόσβαση pixel προς pixel στα εμφανιζόμενα δεδομένα και επιτρέπει την προβολή διαφόρων στοιχείων γραφικών, συμπεριλαμβανομένου του βίντεο, στον καμβά.

Ένα καλό παράδειγμα όπου χρειάζεται αυτό είναι σε μια εργασία επεξεργασίας/ανάλυσης εικόνας.

Το Processing.js προσφέρει δύο προσεγγίσεις στην περιγραφή της οπτικοποίησης: ενδιάμεσο κώδικα, περαιτέρω ανάλυση από την ίδια τη βιβλιοθήκη (σε ξεχωριστό αρχείο ή μέσα στη σελίδα) και ρητό κώδικα JavaScript.

Για παράδειγμα, για να σχεδιάσετε ένα σύνολο φράκταλ Mandelbrot, μπορείτε να χρησιμοποιήσετε είτε την επιλογή που αναφέρεται στη σελίδα με το αντίστοιχο παράδειγμα είτε τον ακόλουθο κώδικα JavaScript:

var xmin = -2,5; varymin = -2; var 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.width), var dy = (ymax - ymin) / (επεξεργασία.ύψος), var y = ymin; για (var j = 0, j< 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++; ) if (n == μεγιστοποιήσεις) processing.pixels.setPixel(i+j*processing.width, 0); else processing.pixels.setPixel(i+j*processing.width, processing.color(n*16 % 255)); x += dx; ) y += dy; ) processing.updatePixels(); ) ) var canvas = document.getElementById("myCanvas" ); var p = νέα Επεξεργασία (καμβάς, sketchProc);

Μπορείτε να το δοκιμάσετε μόνοι σας εδώ: http://silverbook.ru/projects/html5datavisualization/demo3-processingjs.htm (αντιγράψτε τον κώδικα, επικολλήστε τον στην κονσόλα και εκτελέστε).

JavaScript InfoVis Toolkit (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" : ), ( "label" : "date D" , "values" : ), ( "label" : "date C" , "values" : )] ); var pieChart = new $jit.PieChart(( injectInto: "infovis" , animate: true , offset: 30, sliceOffset: 0, labelOffset: 20, type: "stacked:gradient" , showLabels:true , resizeLabels: 7, Label: ( τύπος: "Εγγενής" , μέγεθος: 20, οικογένεια: "Arial" , χρώμα: "λευκό" ), Συμβουλές: ( ενεργοποίηση: true , onShow: συνάρτηση (συμβουλή, στοιχείο) ( tip.innerHTML = " "+ elem.name + ": " + elem.value; ) ) ));

αρκεί να καλέσετε το σχέδιο:

PieChart.loadJSON(json);

jQuery Sparklines

Οπτικοποίηση χάρτη με SVG

Ας περάσουμε στο SVG και ας ξεκινήσουμε με ένα απλό παράδειγμα. Φανταστείτε ότι πρέπει να εμφανίσετε ορισμένα δεδομένα σε έναν χάρτη περιοχών, ποιος είναι ο ευκολότερος τρόπος για να το κάνετε αυτό;

Εάν έχετε έναν έτοιμο χάρτη με τη μορφή SVG (πήρα έναν χάρτη της Ρωσίας από τον ιστότοπο της Wikipedia), τότε αυτό γίνεται πολύ απλά - αρκεί κάθε περιοχή να έχει το δικό της μοναδικό αναγνωριστικό μέσα στο έγγραφο SVG, τότε εισάγουμε τον χάρτη ως inline svg και τον χρωματίζουμε με έναν απλό κώδικα στο σωστό χρώμα:

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

Εάν κάνετε το ίδιο σε έναν βρόχο, τότε μπορείτε ήδη να χρωματίσετε όχι μόνο την περιοχή, αλλά ολόκληρη την περιοχή ή ακόμα και ολόκληρη τη χώρα:

var data = [(id: "KurganOblast" , value: 30), (id: "SverdlovskOblast" , value: 200), (id: "TyumenOblast" , value: 75), (id: "KhantiaMansia" , value: 100 ), (id: "YamaloNenetsAutDistrict" , τιμή: 20), (id: "ChelyabinskOblast" , τιμή: 150)]; για (var i = 0; i< data.length; i++) { var item = data[i]; var region = document.getElementById(item.id); region.style.fill = RGBtoHex(item.value, 0, 0); }

Βιβλιοθήκες για οπτικοποίηση δεδομένων με SVG

Όπως είπα, τόσο το Canvas όσο και το SVG είναι κατάλληλα για την επίλυση της παραδοσιακής εργασίας της οπτικοποίησης αριθμητικών δεδομένων με τη μορφή γραφημάτων και γραφημάτων. Και στις δύο περιπτώσεις, αυτό είναι αρκετά εύκολο να γίνει με τις κατάλληλες βιβλιοθήκες.

Έχουμε ήδη εξετάσει τα παραδείγματα Canvas, τώρα ας δούμε αρκετές βιβλιοθήκες για εργασία με SVG. (Αυτή δεν είναι επίσης μια εξαντλητική λίστα, αλλά μάλλον υψηλής ποιότητας και δημοφιλείς λύσεις.)

Ραφαήλ

Για να προσθέσω ένα απλό διάγραμμα πίταςαρκετός κώδικας όπως αυτός:

var r = Raphael("διάγραμμα" , 640, 480); var pie = r.g.piechart(320, 240, 100, );

Με μερικές πρόσθετες λειτουργίες, μπορείτε να προσθέσετε ένα υπόμνημα, λεζάντες γραφήματος και διαδραστικές συμβουλές εργαλείων:

var r = Raphael("διάγραμμα" , 640, 480); r.g.txtattr.font = "12px "Fontin Sans", Fontin-Sans, sans-serif"; r.g.text(320, 100, "Interactive Pie Chart" ).attr(("font-size" : 20)); var pie = r.g.piechart(320, 240, 100, ,
(υπόμνημα: ["%%.%% – Enterprise Users" , "IE Users" ], legendpos: "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" ) ; if (this .label) ( this .label.animate((scale: 1), 500, "bounce" ); this .label.attr(("font-weight" : 400)); ) ));

Ομοίως, μπορείτε να εμφανίσετε άλλους τύπους γραφημάτων χρησιμοποιώντας τις κατάλληλες μεθόδους. Δείτε παραδείγματα απευθείας στον ιστότοπο επέκτασης http://g.raphaeljs.com/

HighchartsJS

Το API της βιβλιοθήκης διευκολύνει τη δημιουργία γραφήματος από δεδομένα σε JSON:

var chart1 = new Highcharts.Chart(( γράφημα: ( renderTo: "charts" , defaultSeriesType: "bar" ), title: ( text: "Fruit Consumption" ), xAxis: ( κατηγορίες: ["Μήλα" , "Μπανάνες" , "Oranges" ] ), yAxis: ( title: ( text: "Fruit eaten" ) ), series: [( name: "Jane" , data: ), ( name: "John" , data: )] ));

Με ένα ελαφρώς πιο περίπλοκο σενάριο, μπορείτε να καθορίσετε πρόσθετες λεπτομέρειες, για παράδειγμα, να εμφανίσετε ένα υπόμνημα, να ρυθμίσετε συμβουλές εργαλείων:

var chart = new Highcharts.Chart(( γράφημα: ( renderTo: "charts" , defaultSeriesType: "area" , spaceBottom: 30 ), title: ( text: "Fruit κατανάλωση *" ), υπότιτλος: ( text: "* Η κατανάλωση μπανάνας της Jane είναι άγνωστη", floating: true , align: "right" , verticalAlign: "bottom" , y: 15 ), legend: ( layout: "vertical" , align: "left" , verticalAlign: "top" , x: 150, y: 100 , floating: true , borderWidth: 1, backgroundColor: "#FFFFFF" ), xAxis: ( κατηγορίες: ["Μήλα" , "Αχλάδια" , "Πορτοκάλια" , "Μπανάνες" , "Σταφύλια" , "Δαμάσκηνα" , "Φράουλες" , "Raspberries" ] ), yAxis: ( title: ( text: "Y-Axis" ), labels: ( formatter: function () ( return this .value; ) ) ), tooltip: ( formatter: function () ( return " "+this.series.name+"
" + this .x +": " + this .y; ) ), plotOptions: ( area: (fillOpacity: 0.5 ) ), series: [( name: "John" , data: ), ( name: "Jane" , δεδομένα: )] ));

Εάν είναι απαραίτητο, μπορείτε να αντικαταστήσετε τα προεπιλεγμένα στυλ με τα δικά σας.

Τι να επιλέξετε: Καμβάς ή SVG;

Όπως μπορείτε να δείτε από τα παραπάνω παραδείγματα, και οι δύο τεχνολογίες είναι συχνά κατάλληλες για εργασίες οπτικοποίησης δεδομένων. Πολλά πράγματα γίνονται με παρόμοιο τρόπο. Σε περιπτώσεις όπου απαιτείται έξοδος pixel-pixel, το Canvas είναι προφανώς πιο κατάλληλο. Όπου το διάγραμμα χωρίζεται σε ξεχωριστά αντικείμενα που πρέπει να είναι διαδραστικά, το SVG ταιριάζει καλύτερα.

Ο καμβάς είναι καλύτερος

• Επεξεργασία γραφικών bitmap
• Εφαρμογή εφέ σε γραφικά/βίντεο
• Δημιουργία γραφικών ράστερ (οπτικοποίηση δεδομένων, φράκταλ, γραφήματα συναρτήσεων)
• Ανάλυση εικόνας
• Γραφικά παιχνιδιού (sprites, φόντο, κ.λπ.)

Το SVG είναι καλύτερο

• Επεκτάσιμες διεπαφές
• Διαδραστικές διεπαφές
• Διαγράμματα, σχήματα
• Διανυσματική επεξεργασία εικόνας

Σε γραφική μορφή, αυτό μπορεί να αναπαρασταθεί ως εξής:

Τέλος, μια άλλη σημαντική περικοπή που είναι επίσης σημαντικό να λάβετε υπόψη κατά την επιλογή μιας τεχνολογίας είναι η απόδοση κατά τη χρήση Canvas και SVG:

Στην πράξη, ο καμβάς λειτουργεί καλύτερα με μικρά μεγέθη περιοχής απόδοσης και μεγάλο αριθμό αντικειμένων, στο SVG ταιριάζει καλύτερα όταν κλιμακώνεται ή εμφανίζεται σε μεγάλη οθόνη και όχι πολύ σε μεγάλους αριθμούςεξάγονται αντικείμενα κάθε φορά.

Αυτό το συμπέρασμα προκύπτει από την έκθεση του προέδρου του διοικητικού συμβουλίου της Bashneft, που ανακοινώθηκε στη γενική συνέλευση των μετόχων της εταιρείας, αντίγραφο της οποίας τέθηκε στη διάθεση των συντακτών.

Από το έγγραφο προκύπτει ότι ως αποτέλεσμα γεωλογικών ερευνών, το 2018 ανακαλύφθηκαν 81 παραγωγικά κοιτάσματα με αποθέματα 19 εκατ. τόνων.

Ταυτόχρονα, η χρήση εξαιρετικά αποτελεσματικών γεωλογικών και τεχνικών μέτρων και η εισαγωγή σύγχρονων τεχνολογιών για ενισχυμένη ανάκτηση πετρελαίου κατέστησαν δυνατή τη διατήρηση της παραγωγής πετρελαίου σε ώριμα κοιτάσματα στη Μπασκίρια στο επίπεδο του 2017 των 15 εκατομμυρίων τόνων μετά τα αποτελέσματα 11 μηνών . Ο συνολικός όγκος παραγωγής για την καθορισμένη περίοδο ανήλθε σε 17,3 εκατομμύρια τόνους πετρελαίου.

Η έκθεση σημειώνει επίσης ότι η δημιουργία μιας ενιαίας αλυσίδας παραγωγής με το συγκρότημα παραγωγής και επεξεργασίας της Rosneft αύξησε την αποτελεσματικότητα των διυλιστηρίων της Ufa και οδήγησε σε μείωση του λειτουργικού κόστους και του κόστους υλικοτεχνικής υποστήριξης. Ειδικότερα, η παραγωγή βενζίνης Euro-6 έχει κατακτηθεί και έχει ξεκινήσει η βιομηχανική παραγωγή πίσσας δρόμου σύμφωνα με το νέο GOST.

Ο όγκος των λιανικών πωλήσεων στα πρατήρια καυσίμων της Bashneft για 11 μήνες του 2018 αυξήθηκε κατά 13,2 τοις εκατό σε σύγκριση με την ίδια περίοδο πέρυσι και έφτασε τους 1,7 εκατομμύρια τόνους.

Για την εφαρμογή της στρατηγικής στον τομέα της πετροχημείας, εκσυγχρονίζεται η πετροχημική παραγωγή. Έτσι, τον Μάιο του 2018, η Ufaorgsintez τέθηκε σε λειτουργία νέα εγκατάστασηπαραγωγή κουμένιου - πρώτων υλών για την κατασκευή χρωμάτων, διαλυτών, διαφόρων πολυμερών που χρησιμοποιούνται στην αυτοκινητοβιομηχανία, την ιατρική και τη φαρμακολογία. Ακολουθεί η ανακατασκευή του συγκροτήματος παραγωγής αρωματικών ουσιών στο Ufaneftekhim, η κατασκευή νέων μονάδων παραγωγής ολεφινών στο Ufaorgsintez.

Ο ενοποιημένος δείκτης λειτουργικών κερδών για 9 μήνες του 2018 αυξήθηκε κατά 22,6 τοις εκατό σε σύγκριση με την ίδια περίοδο του 2017 και ανήλθε σε 135,5 δισεκατομμύρια ρούβλια. Τα καθαρά κέρδη της Bashneft έφθασαν τα 74,6 δισεκατομμύρια ρούβλια, δηλαδή 73,5% περισσότερα από την αντίστοιχη περσινή περίοδο.

Κατά το τρίτο τρίμηνο, η Bashneft κατέβαλε μερίσματα στους μετόχους που ανακοινώθηκαν στην ετήσια συνέλευση τον Ιούνιο του 2018 στο ποσό των 28,2 δισεκατομμυρίων ρούβλια και το συνολικό ποσό των μερισμάτων που καταβλήθηκαν από την αρχή του έτους ανήλθε σε 43 δισεκατομμύρια ρούβλια.

Ταυτόχρονα, το επίπεδο του καθαρού χρέους της εταιρείας μειώθηκε και στις 30 Σεπτεμβρίου 2018 ανερχόταν σε 40,1 δισεκατομμύρια ρούβλια (την ίδια ημερομηνία του 2017, ο αριθμός αυτός ήταν 104,7 δισεκατομμύρια ρούβλια).

Ταυτόχρονα, κατά την περίοδο αναφοράς, οι φορολογικές εκπτώσεις στον προϋπολογισμό του Μπασκορτοστάν, λαμβάνοντας υπόψη την εφάπαξ πληρωμή φόρου εισοδήματος, αυξήθηκαν κατά 1,5 φορές σε σύγκριση με την ίδια περίοδο πέρυσι και ανήλθαν σε 50,5 δισεκατομμύρια ρούβλια.

Υπάρχει μια ετικέτα για να συμπεριλάβετε μια εικόνα σε ένα συγκεκριμένο μέρος της σελίδας. . Αυτή η ετικέτα έχει μια απαιτούμενη παράμετρο: SRC="", και αρκετές προαιρετικές. Η παράμετρος SRC="" λέει στο πρόγραμμα περιήγησης πού να αναζητήσει το γραφικό και θα πρέπει να έχει ως τιμή τη διεύθυνση URL του πόρου όπου βρίσκεται το αρχείο γραφικών. Στην απλούστερη περίπτωση, αυτό το αρχείο θα τοποθετηθεί στον ριζικό κατάλογο ή στον φάκελο IMG του ιστότοπού σας. Προαιρετικές παράμετροι:

Η παράμετρος ALT="" περιέχει μια επιγραφή ως τιμή που λέει για το περιεχόμενο της εικόνας για εκείνους τους επισκέπτες των οποίων τα προγράμματα περιήγησης δεν υποστηρίζουν γραφικά ή δεν λειτουργούν σε απενεργοποιημένη λειτουργία γραφικών. Η ίδια επιγραφή εμφανίζεται όταν τοποθετείτε το ποντίκι πάνω από την εικόνα.

Οι παράμετροι WIDTH="" HEIGHT="" έχουν ως τιμές τις διαστάσεις της εικόνας ως προς το πλάτος και το ύψος σε pixel. Είναι επιθυμητό να προσδιορίσετε αυτές τις παραμέτρους στον κώδικα της σελίδας, έτσι ώστε το πρόγραμμα περιήγησης να αφήνει χώρο για την εικόνα εκ των προτέρων και, στη συνέχεια, κατά τη φόρτωση, η σελίδα θα "σπάει" λιγότερο. Επιπλέον, αυτές οι παράμετροι μπορούν να χρησιμοποιηθούν για την προσαρμογή του μεγέθους της εικόνας στο παράθυρο του προγράμματος περιήγησης.

Η παράμετρος BORDER="" σχεδιάζει ένα περίγραμμα γύρω από την εικόνα. Η τιμή είναι ένας αριθμός που υποδεικνύει το πλάτος του πλαισίου σε pixel.

Η παράμετρος ALIGN= καθορίζει τη θέση της εικόνας στη σελίδα και μπορεί να λάβει τιμές TOP - ευθυγραμμίζει το επάνω περίγραμμα της εικόνας με το υψηλότερο στοιχείο της τρέχουσας γραμμής, TEXTTOP - ευθυγραμμίζει το επάνω περίγραμμα της εικόνας με το υψηλότερο στοιχείο κειμένου της τρέχουσας γραμμής, MIDDLE - ευθυγραμμίζει το μέσο της εικόνας με τη γραμμή βάσης της τρέχουσας γραμμής , ABSMIDDLE - ευθυγραμμίζει το μέσο της εικόνας στο μέσο της τρέχουσας γραμμής. BASELINE ή BOTTOM - ευθυγραμμίζει το κάτω περίγραμμα της εικόνας με τη γραμμή βάσης της τρέχουσας γραμμής, ABSBOTTOM - ευθυγραμμίζει το κάτω περίγραμμα της εικόνας με το κάτω περίγραμμα της τρέχουσας γραμμής, HSPACE= - ορίζει την οριζόντια εσοχή, VSPACE= - ορίζει το κάθετη εσοχή.

Σύνταξη ετικέτας:

Καρδιά

Η γραμμή εκτέλεσης ορίζεται από την ετικέτα .

Τα χαρακτηριστικά αυτής της ετικέτας είναι bgcolor - το χρώμα φόντου της γραμμής κύλισης, ύψος - το ύψος της γραμμής, πλάτος - το πλάτος της γραμμής.

Κατεύθυνση - ορίζει την κατεύθυνση κίνησης του δείκτη - κατεύθυνση = "αριστερά" (δεξιά, πάνω, κάτω) - κίνηση προς τα αριστερά (δεξιά, πάνω, κάτω).

Συμπεριφορά - συμπεριφορά συμβολοσειράς - Behaviour="scroll" (slide, alternative). Κύλιση - κανονική κύλιση (δεν μπορείτε να το συνταγογραφήσετε, είναι η προεπιλογή)

Σύρετε - κάνοντας κύλιση με στοπ, η γραμμή τρέχει μέχρι την άκρη και σταματά. Εάν η παράμετρος βρόχου χρησιμοποιείται ταυτόχρονα με το behavor="slide" , τότε η γραμμή θα πραγματοποιήσει κύλιση στον καθορισμένο αριθμό φορών και θα σταματήσει στην άκρη. Εναλλακτική - η γραμμή θα μετακινηθεί από άκρη σε άκρη.
Scrollamount - ταχύτητα γραμμής, scrollamount="1". Μπορεί να πάρει τιμές από 1 έως 10. 1 είναι η πιο αργή κίνηση, 10 είναι η ταχύτερη.

Σύνταξη ετικέτας: κείμενο

Τα σύγχρονα προγράμματα περιήγησης ιστού μπορούν να αναπαράγουν αρχεία βίντεο και ήχου σε διάφορες μορφές. Για να το κάνουν αυτό, χρησιμοποιούν ενσωματωμένα προγράμματα αναπαραγωγής (πρόσθετα, στοιχεία ελέγχου ActiveX) ή εξωτερικά προγράμματα αναπαραγωγής. Μπορείτε να εισαγάγετε ήχο ή βίντεο σε ένα έγγραφο HTML χρησιμοποιώντας διάφορες ετικέτες:

- για εισαγωγή ήχου φόντου.

- για εισαγωγή βίντεο σε μορφή AVI.

- για την εισαγωγή αρχείων ήχου και βίντεο.

- για εισαγωγή αρχείων ήχου και βίντεο.

Όταν αποφασίζετε να ενσωματώσετε ήχο ή/και βίντεο σε ένα έγγραφο HTML, να έχετε κατά νου ότι τα αντίστοιχα αρχεία είναι αρκετά μεγάλα. Τα πιο δημοφιλή τώρα στον Ιστό είναι MP3, WMA, AIFF, AU, RealAudio (ra και ram), MP4, MIDI και MPEG, MOV. Η μορφή ήχου WAV και η μορφή βίντεο AVI χρησιμοποιούνται σπάνια στο Διαδίκτυο.