Scalable Vector Graphics буюу SVG нь өнөөдөр вэб сайтын дизайнд чухал үүрэг гүйцэтгэж байна. Хэрэв та вэб дизайны ажилдаа одоогоор SVG ашиглаагүй байгаа бол яагаад үүнийг хийж эхлэх ёстойгоос гадна эдгээр файлуудыг дэмждэггүй хуучин хөтчүүдэд ашиглаж болох нөөц боломжуудыг эндээс үзнэ үү.
Тогтоол
SVG-ийн хамгийн том давуу тал бол нарийвчлалын хараат бус байдал юм. SVG файлууд нь вектор график (пиксел дээр суурилсан растер зургуудаас ялгаатай) учир зургийн чанарыг алдалгүйгээр хэмжээг нь өөрчлөх боломжтой. Энэ нь олон төрлийн дэлгэцийн хэмжээ, төхөөрөмжүүдэд сайн харагдах, сайн ажиллах ёстой мэдрэмжтэй вэб сайтуудыг үүсгэх үед ялангуяа тустай. Та SVG файлуудыг ямар нэгэн байдлаар чанараа алдагдуулахгүйгээр хариу үйлдэл үзүүлдэг вэб сайтынхаа хэмжээ, байршлын хэрэгцээнд нийцүүлэн томруулж болно.
Ерөнхийдөө SVG нь хэмжээнээс үл хамааран бусад форматтай зургуудаас илүү зөөлөн, тод харагддаг.
Файлын хэмжээ
Мэдрэмжтэй вэб сайт дээр растер зураг (жишээ нь, JPG, PNG, GIF) ашиглахтай холбоотой нэг бэрхшээл бол файлын хэмжээ юм. Растер зураг нь вектор зураг шиг масштабтай байдаггүй тул та пиксел дээр суурилсан зургуудаа харуулах хамгийн том хэмжээтэй байх ёстой. Учир нь та зургийг үргэлж жижигрүүлж, чанарыг нь хадгалах боломжтой боловч томруулсан зургийг гаргахад мөн адил биш юм. Үр дүн нь үзэж буй хэмжээнээсээ хамаагүй том зургууд гарч, хөтчүүдийг том файлуудыг татаж авахад хүргэдэг.
Харин, вектор график нь өргөтгөх боломжтой тул эдгээр зургийг хэр том харуулах шаардлагатай байгаагаас үл хамааран та маш жижиг файлын хэмжээг ашиглаж болно. Энэ нь эцсийн дүндээ сайтын ерөнхий гүйцэтгэл болон татаж авах хурдыг оновчтой болгодог.
CSS загвар
Та хуудасны HTML-д SVG-г хялбархан нэмэх боломжтой. Үүнийг inline SVG гэж нэрлэдэг. Inline SVG ашиглахын нэг давуу тал нь графикийг хөтөчөөр зурдаг тул зургийн файлыг татахын тулд HTTP хүсэлт шаардлагагүй болно.
Өөр нэг давуу тал: Та CSS ашиглан шугаман SVG-г загварчилж болно. SVG дүрсний өнгийг өөрчлөх шаардлагатай юу? График засварлах программ дээр тэр зургийг засварлаж, дараа нь файлыг дахин экспортлож, байршуулахын оронд SVG файлыг хэдхэн мөр CSS ашиглан өөрчлөх боломжтой. Та CSS-г ашиглан хулганын төлөв болон бусад дизайны хэрэгцээнд зориулж SVG-г өөрчлөх боломжтой.
Доод шугам
Та доторлогоотой SVG файлуудыг CSS-ээр загварчлах боломжтой тул тэдгээрт CSS хөдөлгөөнт дүрсийг мөн ашиглаж болно. CSS хувиргалт ба шилжилт нь SVG-д амьдрал нэмэх хоёр хялбар арга юм. Та iPad-г дэмжихээ больсон Flash-г ашиглахгүйгээр хуудаснаас Flash-тэй төстэй баялаг туршлага олж авах боломжтой. Үнэн хэрэгтээ, Adobe 2020 оны эцэс гэхэд Flash програмыг халах гэж байна.
SVG-н хэрэглээ
SVG шиг хүчирхэг ч бусад зургийн формат бүрийг орлож чадахгүй. Өнгөний гүн шаарддаг зургууд нь-j.webp
SVG нь график, диаграм, компанийн лого гэх мэт нарийн төвөгтэй зургуудад мөн тохиромжтой. Эдгээр бүх графикууд нь өргөтгөх боломжтой бөгөөд CSS-ээр загварчлах боломжтой байдаг.
Хуучин хөтчүүдийн дэмжлэг
SVG-н одоогийн дэмжлэг нь орчин үеийн вэб хөтчүүдэд маш сайн байдаг. Эдгээр графикуудыг дэмждэггүй цорын ганц хөтөч бол Internet Explorer-ийн хуучин хувилбарууд (Microsoft дэмжихээ больсон) болон Android-ийн цөөн хэдэн хуучин хувилбарууд юм. Ерөнхийдөө хайлтын системийн маш бага хувь нь эдгээр хөтчүүдийг ашигладаг хэвээр байгаа бөгөөд энэ тоо багассаар байна. Энэ нь та санаа зоволтгүй вэбсайт дээрээ SVG-г ашиглах боломжтой гэсэн үг.
Хэрэв та SVG-д нөөц боломж олгохыг хүсвэл Filament Group-ийн Grumpicon гэх мэт хэрэгслийг ашиглана уу. Энэ нөөц нь таны SVG зургийн файлуудаас-p.webp
