Scalable Vector Graphics ашиглах нь ашиг тус
Scalable Vector Graphics эсвэл SVG нь өнөөдөр вэбсайтын дизайнд чухал үүрэг гүйцэтгэдэг. Хэрэв та өөрийн вэб дизайныг SVG-г одоогоор ашигладаггүй бол дараах шалтгаануудын нэг нь эдгээр файлуудыг дэмждэггүй хуучин вэб хөтөч дээр ашиглах боломжтой.
Шийдвэр
SVG-ийн хамгийн том ашиг бол шийдвэрийг бие даасан байдлаар шийдэх явдал юм. SVG файл нь пиксел дээр суурилсан растер зургийн оронд вектор график болдог учраас зургийн чанарыг алдалгүйгээр өөрчилж болно. Энэ нь ялангуяа сайн дэлгэцэн дээр ажиллах чадвартай вэбсайтууд үүсгэдэг бөгөөд өргөн дэлгэцийн хэмжээнүүд болон төхөөрөмжүүд дээр ажиллах боломжтой .
SVG файлууд нь таны вэбсайттай нийцсэн вэбсайтуудын хэмжээ, байршлын хэрэгцээ шаардлагыг хангахын тулд дээшээ эсвэл доошоо өргөж болох ба эдгээр зургуудыг замаас аль ч алхамын чанарыг алдагдуулж болзошгүй талаар санаа зовох хэрэггүй болно.
Файлын хэмжээ
Растер зургийн (JPG, PNG, GIF) ашиглахад тулгарч буй бэрхшээлүүдийн нэг нь эдгээр зургийн файлын хэмжээ юм. Растерын зургууд нь векторууд хийдэг арга замыг няцаахгүй тул та пиксел дээр тулгуурласан зургуудаа хамгийн их хэмжээгээр харуулах болно. Учир нь та үргэлж жижиг дүрсийг бүтээж чанараа хадгалж чадна, гэхдээ зураг гаргах нь тийм ч зөв биш юм. Эцэст нь үр дүн нь таны дэлгэц дээр үзүүлж буй хэмжээнээсээ хамаагүй том хэмжээтэй зураг байдаг бөгөөд энэ нь маш том файлыг татаж авах шаардлагагүй гэсэн үг юм.
SVG энэ асуудлыг шийдвэрлэх болно. Вектор графикууд нь өргөтгөх боломжтой учраас тэдгээр зургийн хэмжээ хэр их байхаас үл хамааран маш бага хэмжээтэй файл байж болно. Энэ нь эцсийн эцэст сайтын гүйцэтгэл болон татаж авах хурданд эерэг нөлөө үзүүлнэ.
CSS Styling
SVG кодыг мөн HTML хуудас руу шууд нэмж болно. Энэ нь "inline SVG" гэж нэрлэгддэг. Inline SVG-г ашигладаг нэг давуу тал нь график зургийг кодоороо буулган авч байдаг учраас зургийг татаж авах HTTP хүсэлт гаргах шаардлагагүй болно. Өөр нэг ач холбогдол бол SVG доторхийг CSS хэлбэрээр илэрхийлж болно.
SVG дүрсийн өнгөийг өөрчлөх хэрэгтэй байна уу? Үүнийг ямар нэг засварлах програм дээр нээх шаардлагагүй, экспорт хийж, файлыг дахин оруулах шаардлага гарвал SVG файлыг CSS цөөн хэдэн мөрөөр өөрчилж болно.
Та мөн SVG график дээр өөр CSS стилийг ашиглахын тулд тэдгээрийг hover мужид эсвэл дизайны зарим хэрэгцээг өөрчлөх боломжтой. Та эдгээр графикийг хуудас руу шилжих хөдөлгөөн, харилцан үйлчлэлийг нэмж болно.
Зургууд
SVG тоон файлыг CSS-тэйгээр нэрлэх боломжтой тул CSS дээр тэдгээрийг ашиглаж болно. CSS хувиргах, шилжүүлэх нь SVG файлд зарим нэг амьдралыг нэмэх хоёр арга зам юм. Та Flash-тэй төстэй туршлагыг нэг хуудаснаас авах боломжтой.
SVG-ийн хэрэглээ
SVG шиг хүчтэй байдаг бол эдгээр график нь таны вэбсайтад ашигладаг бусад бүх зургийн хэлбэрийг сольж чадахгүй. Гүн гүнзгий гүн шаардлагатай зургууд нь JPG эсвэл PNG файл байх шаардлагатай хэвээр байгаа боловч дүрс шиг дүрсийг SVG шиг төгс тохирох боломжтой.
SVG нь компаний лого, график, график зэрэг илүү дэлгэрэнгүй зураглалыг хийхэд тохиромжтой. Бүх графикууд нь өргөтгөх чадвартай, CSS-тэй байх боломжтой, энэ зүйлд жагсаасан бусад давуу талуудаас ашиг тус хүртэнэ.
Хуучин браузеруудад зориулсан дэмжлэг
SVG-д зориулсан одоогийн дэмжлэг нь орчин үеийн вэб хөтчүүдэд маш сайн байдаг. Эдгээр графикуудад үнэхээр дэмжигдээгүй цорын ганц хөтчүүд нь Internet Explorer-ийн хуучин хувилбарууд (Хувилбар 8 ба түүнээс доош) бөгөөд Android-ийн хэдэн хуучин хувилбарууд юм. Бүх зүйл, хөтөч попын маш бага хувь нь эдгээр хөтчүүдийг ашигладаг бөгөөд энэ тоо нь үргэлж багассаар байна. Энэ нь SVG-ийг өнөөдөр вэбсайт дээр аюулгүй байдлаар ашиглах боломжтой гэсэн үг юм.
Хэрэв та SVG-ийн уналтанд орохыг хүсч байгаа бол Grumpicon шиг Filament Group -аас гаралтай хэрэгсэл ашиглаж болно. Энэ нөөц нь таны SVG зургийн файлыг авч, хуучин хөтчүүдэд зориулсан PNG уналт үүсгэх болно.
1/27/17 дээр Жереми Герард засварлав