Въведение в SVG
Има няколко формата, в които могат да съществуват изображения, които варират в зависимост от характеристиките на изображението. Изображението може да е непрозрачно изображение, прозрачното и така нататък и всички такива характеристики на изображенията могат да бъдат определени от формата, който има. Някои от много често използваните формати на изображения са JPEG.webp, PNG, GIF и др. Сред различните формати има важен, който се създава с помощта на реда на кода в XML или HTML, наречен SVG. В тази статия ще научим за SVG, как се създава, какви са екстрите в този формат и подобни неща. Въпреки че това не е често използваният формат на изображенията, той играе важна роля в съвременното уеб приложение, което изисква качество заедно с атрактивен интерфейс.
Определение на SVG
SVG означава Скалируема векторна графика. Може да бъде определен като формат на изображения, които се получават с помощта на XML или HTML тагове. Много е полезно да се проектира двуизмерна графика и може да се подобри практическото взаимодействие на потребителите. Той е разработен от световния уеб консорциум двадесет години през 1999 г. Последната версия на SVG е 1.1, която беше пусната през 2011 г. Той е много различен от изображенията на други формати, тъй като тези, които изискват приложения за графично проектиране, но графиките с SVG разширението всъщност е разработено с помощта на кодовете или таговете. Той е много интерактивен и може да позволи да се проектира двуизмерната графика.
Важен момент, който трябва да знаете за мащабируемата векторна графика е, че тя не може да бъде изтеглена подобно на изображения във формат JPEG.webp или PNG. Когато изтегляме изображения с разширение JPEG.webp или PNG, то спестява копие на изображението, което може да бъде редактирано с помощта на инструменти за графично проектиране като Adobe Photoshop, боя и т.н., докато SVG изображението ще трябва да бъде редактирано чрез промяна на кодовете. В съвременната епоха, където уеб приложенията трябва да бъдат перфектни по всякакъв начин, SVG графиката добавя невероятно качество към нея. От проектирането само на кръг до проектирането на сложна графика, човек трябва да използва маркерите, ако иска графиката да бъде разработена с SVG.
Как SVG прави работата толкова лесна?
Има няколко точки, в които SVG всъщност прави нещата много лесни. Както обсъждахме по-рано, е много полезно, когато става въпрос за проектиране на уеб приложението, което трябва да има невероятни перспективи. Графиката, създадена с SVG формат, го прави много интерактивен за потребителя да работи с приложението. Много е полезно, когато се изисква да използвате графичния компонент навсякъде в уеб приложението. Заедно с HTML кодовете, човек трябва да напише SVG маркера, за да внесе функционалността му в уеб страницата. Ако човек иска да нарисува простия интерфейс, това може да се направи на няколко числа от линията, но в случай, че се предполага, че графиката е малко по-сложна, това ще изисква дълъг HTML или XML код. Чрез интегриране на по-прости графични компоненти като кръг, квадрат, правоъгълник и така нататък, човек може да проектира сложна графика.
Работа със SVG
За да научим как да работим със SVG, ще преминем през реда от кодове, които трябва да бъдат написани, за да се развие SVG графиката. Ще разгледаме пример, в който ще проектираме обикновен кръг с запълнен в него червен цвят и с черна рамка. Ще пишем кодове в HTML и ще използваме SVG тага, за да въвеждаме графиките в уеб страницата.
В горния код сме написали SVG графиката, използвайки SVG тага и неговите важни атрибути. В първия ред с SVG етикета сме споменали ширината и височината на кръга. Във втория ред сме използвали маркера за кръг, който може да бъде използван като подтаг под SVG тага. Cx е атрибутът на маркера на кръга, който се използва за определяне на колко пиксела, които кръгът трябва да покрие в x-оста. Cy е атрибутът на тага на кръга, който се използва за определяне на колко пиксела, които кръгът трябва да покрие в y-оста. Атрибутът r определя радиуса на окръжността.
Ходът определя цвета на рамката, която е черна в нашия случай. Следващият атрибут-ширина на удара определя ширината на кръга, която човек може да предостави в пиксели. Последният атрибут на тага на кръга е запълнен, който се използва за определяне на кой цвят трябва да бъде попълнен в кръга. Избрахме червено, така че в изхода ще можете да видите, че кръгът има червен цвят в него. Ако искате да работите с SVG кода, можете просто да копирате кода от горното изображение, да го запишете с HTML разширение и да видите какво ще намерите като изход. Можете да ги поддържате модифицирани, за да научите или да изследвате повече.
Необходими умения
За да работите със SVG, трябва да знаете как да работите с HTML маркерите. В HTML, той се реализира с помощта на SVG маркер, който освен това има под-маркерите, които могат да бъдат използвани под SVG тага, за да се проектира графиката. Ако вече сте работили като уеб приложение, създадено, може да ви е лесно да работите със SVG. Въпреки че не всичко е да се даде структура на страницата, за да промени облика на HTML елементите, ще ви трябва малко практика, преди да започнете да работите със SVG. Ако имате добра идея за графично проектиране, това ще добави предимство, за да работите с или да научите SVG за кратък период от време.
заключение
Мащабируема векторна графика е специалният формат на изображенията, който има двуизмерна графика. Въз основа на изискването човек може да използва изображения с който и да е от форматите, но използвайки SVG, той ще бъде малко по-различен, тъй като е разработен с помощта на линиите на кодовете, а не с помощта на инструментите за графично проектиране. Използва се главно в уеб приложението, тъй като трябва да бъде написано с помощта на XML или HTML маркера. Човек може да го използва, за да направи уеб приложението доста интерактивно, за да подобри практическата работа на потребителите.
Препоръчителни статии
Това е ръководство за това какво е SVG. Тук обсъждаме дефиницията, понятията, работата и как SVG улеснява работата. Можете да разгледате и другите ни предложени статии, за да научите повече -
- Разпределение на мрежата в Java
- PHP струнни функции
- Приложения на HTML
- Кариера в ASP.NET