Перавагі выкарыстання Scalable Vector Graphics
Scalable Vector Graphics, SVG або, гуляе важную ролю ў дызайне сайта сёння. Калі вы не выкарыстоўваеце SVG ў вашым вэб-дызайн работы, вось некалькі прычын, чаму вы павінны пачаць рабіць так, як і адкаты, якія можна выкарыстоўваць для больш старых браўзэраў, якія не падтрымліваюць гэтыя файлы.
дазвол
Самае вялікае перавага SVG з'яўляецца рэзалюцыя незалежнасці. Паколькі SVG файлы вектарнай графікі замест пікселяў на аснове растравых малюнкаў, яны могуць быць зменены без страты якасці малюнка. Гэта асабліва карысна , калі вы ствараеце рэагуюць сайты , якія павінны добра выглядаць і добра працаваць у шырокім дыяпазоне памераў экрана і прылад .
SVG-файлы можна маштабаваць уверх ці ўніз, каб прыстасаваць зменлівыя патрэбнасці памеру і размяшчэння вашага спагадлівага сайта і вам не трэба турбавацца аб гэтых графічным таго сумніўнай якасці любога кроку на шляху.
памер файла
Адна з праблем , з выкарыстаннем растравых малюнкаў (JPG, PNG, GIF) на спагадных сайтах з'яўляецца памерам файла гэтых малюнкаў. Паколькі растравыя малюнка не маштабуецца так, што вектарныя рабіць, вам трэба даставіць вашыя піксельныя малюнка на самым вялікім памеры, у якіх яны будуць адлюстроўвацца. Гэта таму, што вы заўсёды можаце зрабіць малюнак менш і захаваць яе якасць, але тое ж самае не дакладна для стварэння малюнкаў больш. Канчатковым вынікам з'яўляецца тое, што вы часта маюць малюнкі, якія нашмат больш, чым яны паказваюцца на экране чалавека, які азначае, што яны дарэмна вымушаныя спампаваць вельмі вялікі файл.
SVG вырашае гэтую праблему. Паколькі вектарная графіка маштабуюцца, вы можаце мець вельмі малыя памеры файлаў незалежна ад таго, наколькі вялікія гэтыя выявы можа спатрэбіцца для адлюстравання. Гэта ў канчатковым рахунку, аказвае станоўчы ўплыў на агульнай хуткасці працы і загрузкі сайта.
CSS Styling
SVG-код таксама можа быць дададзены непасрэдна ў HTML-старонкі. Гэта вядома як «инлайн SVG.» Адным з пераваг выкарыстання ўбудаванага SVG з'яўляецца тое, што, так як графікі на самай справе звяртаецца браўзэрам на аснове кода, няма неабходнасці рабіць запыт HTTP для здабывання файла малюнка. Іншым перавагай з'яўляецца тое, што ўбудаваны SVG можа быць стылізаваны з дапамогай CSS.
Трэба змяніць колер значка SVG? Замест неабходнасці адкрываць гэты файл у нейкім праграмнае забеспячэнне для рэдагавання і экспарту, і загрузіць файл яшчэ раз, вы можаце проста змяніць файл SVG з дапамогай некалькіх радкоў CSS.
Вы таксама можаце выкарыстоўваць іншыя стылі CSS на SVG графіку, каб змяніць іх па навядзенні станаў або для пэўных патрэб праектавання. Вы нават можаце ажывіць гэтыя графікі, каб дадаць нейкі рух і інтэрактыўнасць на старонку.
анімацыі
Паколькі убудаваны SVG-файлы могуць быць стылізаваныя з CSS, вы можаце выкарыстоўваць CSS анімацыі на іх. CSS пераўтворыць і пераходы два простых спосабу дадаць некаторую жыццё SVG-файлаў. Вы можаце атрымаць багатыя флэш-падобныя вопыты на старонцы , не паддаючыся недахопаў , якія прыходзяць з выкарыстаннем Flash , на вэб - сайтах сёння.
выкарыстанне SVG
Магутны як SVG, гэтыя графікі не можа замяніць любы іншы фармат малюнка, які вы выкарыстоўваеце на сваім сайце. Фотаздымкі, якія патрабуюць глыбокай глыбіні колеру будзе па-ранейшаму павінны быць JPG або, магчыма, файл PNG, але простыя вобразы, такія як абразкі выдатна падыходзяць для выканання, як SVG.
SVG можа быць таксама падыходзіць для больш складаных ілюстрацый, такіх як лагатыпы кампаній або графікаў і дыяграм. Усе графікі выйграюць ад таго, які маштабуецца, здольны быць стылізаваныя з CSS, а таксама іншыя перавагі, пералічаныя ў гэтым артыкуле.
Падтрымка старых браўзэраў
Бягучая падтрымка SVG вельмі добра ў сучасных вэб-браўзэраў. Толькі браўзэры, якія сапраўды не хапае падтрымкі для гэтых графікаў з'яўляюцца больш старыя версіі Internet Explorer (версія 8 і ніжэй) і некалькі больш старых версій Android. Увогуле, вельмі невялікі працэнт насельніцтва наведаных да гэтага часу выкарыстоўвае гэтыя браўзэры, і гэта лік працягвае скарачацца. Гэта азначае, што SVG можа выкарыстоўвацца даволі бяспечна на вэб-сайтах сёння.
Калі вы хочаце, каб забяспечыць запасны варыянт для SVG, вы можаце выкарыстоўваць такі інструмент, як Grumpicon з сінтэтычных нітак групы. Гэты рэсурс будзе прымаць ваш SVG файлы малюнкаў і стварэнне PNG для больш старых рэзервовых аб'яваў браўзэраў.
Пад рэдакцыяй Джэрэмі Girard на 1/27/17