{"id":28641,"date":"2021-07-28T13:35:21","date_gmt":"2021-07-28T06:35:21","guid":{"rendered":"https:\/\/wiki.tino.org\/staging\/?p=28641"},"modified":"2021-11-23T16:20:45","modified_gmt":"2021-11-23T09:20:45","slug":"svg-la-gi","status":"publish","type":"post","link":"https:\/\/tino.vn\/blog\/svg-la-gi\/","title":{"rendered":"SVG l\u00e0 g\u00ec? 4 l\u00fd do t\u1ea1i sao b\u1ea1n n\u00ean s\u1eed d\u1ee5ng SVG"},"content":{"rendered":"\n<p><strong>B\u1ea1n quan t\u00e2m l\u00fd do v\u00ec sao m\u1ed9t s\u1ed1 \u1ea3nh tr\u00ean web l\u1ea1i b\u1ecb v\u1ee1 h\u1ea1t, m\u1ed9t s\u1ed1 l\u1ea1i kh\u00f4ng khi b\u1ea1n ph\u00f3ng to \u1ea3nh, c\u0169ng nh\u01b0 c\u00e1ch l\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 th\u1ef1c hi\u1ec7n \u0111\u01b0\u1ee3c t\u01b0\u01a1ng t\u1ef1? V\u1eady, trong b\u00e0i vi\u1ebft n\u00e0y, Tino Group s\u1ebd gi\u00fap b\u1ea1n gi\u1ea3i \u0111\u00e1p b\u00ed m\u1eadt t\u1ea1o \u1ea3nh b\u1eb1ng \u0111\u1ecbnh d\u1ea1ng SVG nh\u00e9!<\/strong><\/p>\n\n\n\n<h2 id=\"SVG_l\u00e0_g\u00ec?\"><a id=\"post-28641-_e6nzfg9lqsxz\"><\/a><strong>SVG l\u00e0 g\u00ec?<\/strong><\/h2>\n\n\n\n<p>Scalable Vector Graphics vi\u1ebft t\u1eaft l\u00e0 <strong>SVG<\/strong> hay <em>vector \u0111\u1ed3 h\u1ecda c\u00f3 th\u1ec3 m\u1edf r\u1ed9ng<\/em>. \u0110\u00e2y l\u00e0 m\u1ed9t \u0111\u1ecbnh d\u1ea1ng ng\u00f4n ng\u1eef<a href=\"https:\/\/tino.vn\/blog\/xml-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"> XML<\/a> nh\u1eb1m mi\u00eau t\u1ea3 m\u1ed9t h\u00ecnh \u1ea3nh vector 2 chi\u1ec1u t\u0129nh ho\u1eb7c \u0111\u1ed9ng. Thay v\u00ec s\u1eed d\u1ee5ng c\u00e1c \u0111\u1ecbnh d\u1ea1ng kh\u00e1c nh\u01b0 JPG, PNG trong \u1ea3nh ho\u1eb7c s\u1eed d\u1ee5ng CSS \u0111\u1ec3 t\u1ea1o \u1ea3nh tr\u00ean web, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng SVG &#8211; m\u1ed9t \u0111\u1ecbnh d\u1ea1ng vector nh\u1eb9 h\u01a1n, ph\u00f3ng to kh\u00f4ng b\u1ecb v\u1ee1 v\u00e0 r\u1ea5t d\u1ec5 \u0111\u1ec3 x\u1eed l\u00fd.<\/p>\n\n\n\n<h3 id=\"V\u00ed_d\u1ee5_v\u1ec1_SVG_trong_th\u1ef1c_t\u1ebf\"><a id=\"post-28641-_ylg3m4djl0xn\"><\/a><strong>V\u00ed d\u1ee5 v\u1ec1 SVG trong th\u1ef1c t\u1ebf<\/strong><\/h3>\n\n\n\n<p>M\u1ed9t v\u00ed d\u1ee5 th\u1ef1c t\u1ebf: b\u1ea1n c\u00f3 th\u1ec3 nh\u00ecn th\u1ea5y \u0111\u00e2y l\u00e0 m\u1ed9t h\u00ecnh \u1ea3nh v\u1edbi \u0111\u1ecbnh d\u1ea1ng SVG ch\u1ec9 n\u1eb7ng 60,1KB. Tuy nhi\u00ean, b\u1ea1n c\u00f3 th\u1ec3 t\u1ea3i v\u1ec1 v\u00e0 m\u1edf r\u1ed9ng \u1ea3nh n\u00e0y ra h\u1ebft m\u1ee9c ph\u00f3ng to nh\u01b0ng \u1ea3nh kh\u00f4ng h\u1ec1 b\u1ecb v\u1ee1 h\u1ea1t nh\u01b0 \u0111\u1ecbnh d\u1ea1ng JPG hay PNG.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1480.png\" alt=\"svg-la-gi\" class=\"wp-image-28643\" width=\"678\" height=\"274\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1480.png 1735w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1480-300x121.png 300w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1480-1024x414.png 1024w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1480-768x311.png 768w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1480-1536x621.png 1536w\" sizes=\"(max-width: 678px) 100vw, 678px\" \/><\/figure><\/div>\n\n\n\n<p>SVG \u0111\u01b0\u1ee3c l\u01b0u tr\u1eef d\u01b0\u1edbi d\u1ea1ng m\u1ed9t t\u1ec7p v\u0103n b\u1ea3n. V\u00ec th\u1ebf, b\u1ea1n c\u00f3 th\u1ec3 m\u1edf t\u1ec7p SVG v\u00e0 ch\u1ec9nh s\u1eeda b\u1eb1ng b\u1ea5t k\u1ef3 m\u1ed9t c\u00f4ng c\u1ee5\/ ph\u1ea7n m\u1ec1m text editor n\u00e0o th\u1eadm ch\u00ed b\u1eb1ng Word!<\/p>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o h\u00ecnh tr\u00f2n c\u00f3 vi\u1ec1n xanh ru\u1ed9t v\u00e0ng v\u1edbi \u0111\u1ecbnh d\u1ea1ng SVG b\u1eb1ng 1 d\u00f2ng code nh\u01b0 sau:<\/p>\n\n\n\n<p><strong>&lt;circle cx=&#8221;50&#8243; cy=&#8221;50&#8243; r=&#8221;40&#8243; stroke=&#8221;green&#8221; stroke-width=&#8221;4&#8243; fill=&#8221;yellow&#8221;&gt;<\/strong><\/p>\n\n\n\n<p>Tino Group s\u1ebd r\u00fat g\u1ecdn c\u00e1c \u00fd l\u1ea1i v\u00e0 b\u1ea1n s\u1ebd th\u1ea5y m\u1ed9t v\u00e0i \u0111i\u1ec1u th\u00fa v\u1ecb nh\u01b0 sau:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>B\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o m\u1ed9t h\u00ecnh \u1ea3nh b\u1eb1ng \u0111\u1ecbnh d\u1ea1ng SVG kh\u00f4ng \u0111\u1ebfn 1KB!<\/li><li>SVG l\u00e0 h\u00ecnh \u1ea3nh \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng b\u1eb1ng XML<\/li><li>T\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed b\u00ean trong t\u1eadp SVG \u0111\u1ec1u c\u00f3 th\u1ec3 tr\u1edf th\u00e0nh \u1ea3nh \u0111\u1ed9ng<\/li><li>SVG \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 t\u1ea1o ra nh\u1eefng \u1ea3nh \u0111\u1ed3 h\u1ecda d\u1ef1a tr\u00ean vector d\u00f9ng cho web<\/li><li>W3C khuy\u1ebfn kh\u00edch n\u00ean s\u1eed d\u1ee5ng SVG<\/li><\/ul>\n\n\n\n<h3 id=\"\u01afu_\u0111i\u1ec3m_c\u1ee7a_SVG\"><a id=\"post-28641-_jpxh89cgxehg\"><\/a><strong>\u01afu \u0111i\u1ec3m c\u1ee7a SVG<\/strong><\/h3>\n\n\n\n<p>C\u00f3 r\u1ea5t nhi\u1ec1u \u0111\u1ecbnh d\u1ea1ng kh\u00e1c b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng cho h\u00ecnh \u1ea3nh c\u1ee7a m\u00ecnh. Tuy nhi\u00ean, b\u1ea1n n\u00ean s\u1eed d\u1ee5ng SVG cho web v\u00ec nh\u1eefng l\u00fd do sau \u0111\u00e2y:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>B\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o v\u00e0 ch\u1ec9nh s\u1eeda \u1ea3nh SVG v\u1edbi b\u1ea5t c\u1ee9 m\u1ed9t c\u00f4ng c\u1ee5 text editor n\u00e0o<\/li><li>S\u1eed d\u1ee5ng \u1ea3nh SVG cho web, b\u1ea1n c\u00f3 th\u1ec3 t\u00ecm ki\u1ebfm, l\u1eadp ch\u1ec9 m\u1ee5c v\u00e0 n\u00e9n \u1ea3nh l\u1ea1i<\/li><li>\u1ea2nh d\u1ea1ng SVG c\u00f3 th\u1ec3 ph\u00f3ng to v\u00f4 h\u1ea1n<\/li><li>\u0110\u1ecbnh d\u1ea1ng SVG s\u1ebd cho ch\u1ea5t l\u01b0\u1ee3ng in ra \u0111\u01b0\u1ee3c t\u1ed1t nh\u1ea5t v\u1edbi b\u1ea5t k\u1ef3 \u0111\u1ed9 ph\u00e2n gi\u1ea3i n\u00e0o<\/li><li>SVG l\u00e0 m\u1ed9t ti\u00eau chu\u1ea9n m\u1edf<\/li><li>B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng XML thu\u1ea7n \u0111\u1ec3 t\u1ea1o SVG<\/li><li>Kh\u1ea3 n\u0103ng ph\u00f3ng to thu nh\u1ecf kh\u00f4ng gi\u1edbi h\u1ea1n &#8211; kh\u00f4ng b\u1ecb v\u1ee1 h\u1ea1t<\/li><\/ul>\n\n\n\n<h3 id=\"T\u1ea1i_sao_n\u00ean_s\u1eed_d\u1ee5ng_SVG?\"><a id=\"post-28641-_wm36naolasa7\"><\/a><strong>T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng SVG?<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Ti\u1ebft ki\u1ec7m dung l\u01b0\u1ee3ng:<\/strong> n\u1ebfu b\u1ea1n l\u01b0u 1 file c\u0169ng h\u00ecnh \u1ea3nh nh\u01b0ng v\u1edbi \u0111\u1ecbnh d\u1ea1ng PNG, b\u1ea1n s\u1ebd th\u1ea5y kh\u1ed1i l\u01b0\u1ee3ng c\u1ee7a SVG s\u1ebd nh\u1ecf h\u01a1n r\u1ea5t nhi\u1ec1u v\u00e0 thu ph\u00f3ng c\u0169ng kh\u00f4ng b\u1ecb v\u1ee1 h\u1ea1t.<\/li><li><strong>Kh\u1ea3 n\u0103ng t\u1ea1o \u1ea3nh \u0111\u1ed9ng<\/strong>: nh\u01b0 trong ph\u1ea7n \u01b0u \u0111i\u1ec3m \u0111\u00e3 nh\u1eafc \u0111\u1ebfn, m\u1ecdi ph\u1ea7n t\u1eed trong SVG b\u1ea1n \u0111\u1ec1u c\u00f3 th\u1ec3 \u0111em ra \u0111\u1ec3 t\u1ea1o th\u00e0nh m\u1ed9t \u1ea3nh \u0111\u1ed9ng, v\u1eeba gi\u1ea3m b\u1edbt c\u00e1c request v\u00e0 l\u00e0m cho trang web c\u1ee7a b\u1ea1n tr\u1edf n\u00ean nhanh nh\u1eb9n. B\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o \u1ea3nh \u0111\u1ed9ng th\u00f4ng qua <a href=\"https:\/\/tino.vn\/blog\/html-css-javascript-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS<\/a> ho\u1eb7c JavaScript \u0111\u1ec3 t\u1ea1o chuy\u1ec3n \u0111\u1ed9ng cho t\u1eebng th\u00e0nh ph\u1ea7n.<\/li><li><strong>Ch\u1ea5t l\u01b0\u1ee3ng \u1ea3nh c\u1ef1c t\u1ed1t<\/strong>: \u0111\u1ecbnh d\u1ea1ng c\u1ee7a SVG l\u00e0 vector. V\u00ec th\u1ebf, b\u1ea1n c\u00f3 th\u1ec3 thu ph\u00f3ng tho\u1ea3i m\u00e1i m\u00e0 kh\u00f4ng lo b\u1ecb v\u1ee1 h\u1ea1t; b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 ch\u1ec9nh s\u1eeda d\u1ec5 d\u00e0ng b\u1eb1ng c\u00e1c text editor.<\/li><li><strong>SVG hi\u1ec7n \u0111\u1ea1i v\u00e0 t\u01b0\u01a1ng th\u00edch<\/strong>: T\u00ednh \u0111\u1ebfn n\u0103m 2017, h\u1ea7u h\u1ebft c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u00e3 h\u1ed7 tr\u1ee3 hi\u1ec3n th\u1ecb h\u00ecnh \u1ea3nh b\u1eb1ng SVG, n\u1ebfu b\u1ea1n m\u1edf m\u1ed9t \u1ea3nh \u0111\u1ecbnh d\u1ea1ng SVG kh\u00f4ng \u0111\u01b0\u1ee3c, b\u1ea1n n\u00ean th\u1eed n\u00e2ng c\u1ea5p tr\u00ecnh duy\u1ec7t c\u1ee7a m\u00ecnh.<\/li><\/ul>\n\n\n\n<h2 id=\"H\u01b0\u1edbng_d\u1eabn_s\u1eed_d\u1ee5ng_SVG\"><a id=\"post-28641-_fxxg41sd0ifo\"><\/a><strong>H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng SVG<\/strong><\/h2>\n\n\n\n<h3 id=\"C\u00e1ch_\u0111\u1ec3_t\u1ea1o_1_file_SVG\"><a id=\"post-28641-_eosnzdno6zyo\"><\/a><strong>C\u00e1ch \u0111\u1ec3 t\u1ea1o 1 file SVG<\/strong><\/h3>\n\n\n\n<h4 id=\"T\u1ea1o_SVG_b\u1eb1ng_code\"><a id=\"post-28641-_ikmjberc0m7\"><\/a><strong>T\u1ea1o SVG b\u1eb1ng code<\/strong><\/h4>\n\n\n\n<p>\u0110\u00e2y l\u00e0 c\u00e1ch th\u1ef1c hi\u1ec7n kh\u00e1 ph\u1ed5 bi\u1ebfn v\u1edbi c\u00e1c coder, b\u1eb1ng c\u00e1ch code, c\u00e1c l\u1eadp tr\u00ecnh vi\u00ean c\u00f3 th\u1ec3 t\u1ea1o ra v\u00f4 s\u1ed1 h\u00ecnh \u1ea3nh, <a href=\"https:\/\/tino.vn\/blog\/layout-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">thi\u1ebft k\u1ebf layout<\/a>,&#8230; \u0110i\u1ec3m chung l\u1ea1i l\u00e0 c\u00e1c th\u00e0nh ph\u1ea7n \u0111\u1ed3 h\u1ecda m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng.<\/p>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u v\u1ec1 ng\u00f4n ng\u1eef XML, CSS v\u00e0 HTML \u0111\u1ec3 t\u1ea1o ngay m\u1ed9t \u1ea3nh SVG nh\u00e9! \u0110\u1ec3 d\u1ec5 h\u00ecnh dung h\u01a1n, b\u1ea1n c\u00f3 th\u1ec3 <strong>copy d\u00f2ng code<\/strong> n\u00e0y v\u1ec1, <strong>m\u1edf notepad<\/strong> l\u00ean v\u00e0 <strong>d\u00e1n <\/strong>v\u00e0o sau \u0111\u00f3 <strong>l\u01b0u l\u1ea1i d\u01b0\u1edbi \u0111\u1ecbnh d\u1ea1ng .SVG =&gt;<\/strong> cu\u1ed1i c\u00f9ng b\u1ea1n<strong> s\u1eed d\u1ee5ng tr\u00ecnh duy\u1ec7t b\u1ea5t k\u1ef3 \u0111\u1ec3 m\u1edf.<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>&lt;!DOCTYPE html><\/p><p>&lt;html><\/p><p>&lt;body><\/p><p>&lt;h1>T\u1ea1o file SVG b\u1eb1ng code&lt;\/h1><\/p><p>&lt;SVG width=&#8221;105&#8243; height=&#8221;400&#8243;><\/p><p>&lt;circle cx=&#8221;50&#8243; cy=&#8221;50&#8243; r=&#8221;40&#8243; stroke=&#8221;red&#8221; stroke-width=&#8221;4&#8243; fill=&#8221;blue&#8221; \/><\/p><p>Tr\u00ecnh duy\u1ec7t c\u1ee7a b\u1ea1n kh\u00f4ng h\u1ed7 tr\u1ee3.<\/p><p>&lt;\/SVG><\/p><p>&lt;\/body><\/p><p>&lt;\/html><\/p><\/blockquote>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o th\u00eam c\u00e1c th\u1ebb sau \u0111\u00e2y v\u00e0 th\u1eed l\u1ea1i cho h\u00ecnh tr\u00f2n c\u1ee7a b\u1ea1n tr\u1edf n\u00ean \u0111\u1eb7c s\u1eafc h\u01a1n:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>&lt;SVG&gt;<\/strong> l\u00e0 th\u1ebb d\u00f9ng \u0111\u1ec3 \u0111\u1ecbnh ngh\u0129a \u0111\u00f3 l\u00e0 m\u1ed9t ph\u1ea7n t\u1eed SVG.<\/li><li><strong>&lt;line&gt; <\/strong>d\u00f9ng \u0111\u1ec3 t\u1ea1o m\u1ed9t \u0111\u01b0\u1eddng th\u0103ng<\/li><li><strong>&lt;rect&gt; <\/strong>T\u1ea1o h\u00ecnh t\u1ee9 gi\u00e1c (vu\u00f4ng, ch\u1eef nh\u1eadt)<\/li><li><strong>&lt;polygon&gt;<\/strong> T\u1ea1o h\u00ecnh \u0111a gi\u00e1c; b\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o tam gi\u00e1c ba c\u1ea1nh ho\u1eb7c nhi\u1ec1u c\u1ea1nh h\u01a1n t\u00f9y b\u1ea1n.<\/li><li><strong>&lt;path&gt;<\/strong> T\u1ea1o h\u00ecnh d\u1ea1ng b\u1ea5t k\u1ef3 b\u1eb1ng c\u00e1ch \u0111\u1ecbnh v\u1ecb \u0111i\u1ec3m v\u00e0 \u0111\u01b0\u1eddng<\/li><li><strong>&lt;defs&gt;<\/strong> \u0110\u1ecbnh ngh\u0129a nh\u1eefng t\u00e0i nguy\u00ean c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng l\u1ea1i<\/li><li><strong>&lt;g&gt; <\/strong>G\u1ed9p nhi\u1ec1u h\u00ecnh d\u1ea1ng th\u00e0nh m\u1ed9t nh\u00f3m vi\u1ebft t\u1eaft c\u1ee7a (<strong>Group<\/strong>).<\/li><li><strong>&lt;use&gt;<\/strong> L\u1ea5y nh\u1eefng t\u00e0i nguy\u00ean c\u00f3 b\u00ean trong &lt;defs&gt; v\u00e0 gi\u00fap ch\u00fang hi\u1ec3n th\u1ecb trong SVG.<\/li><\/ul>\n\n\n\n<h4 id=\"T\u1ea1o_SVG_b\u1eb1ng_ph\u1ea7n_m\u1ec1m_\u0111\u1ed3_h\u1ecda\"><a id=\"post-28641-_e2mim7ef8pyc\"><\/a><strong>T\u1ea1o SVG b\u1eb1ng ph\u1ea7n m\u1ec1m \u0111\u1ed3 h\u1ecda<\/strong><\/h4>\n\n\n\n<p>V\u1edbi c\u00e1c c\u00f4ng c\u1ee5 \u0111\u1ed3 h\u1ecda nh\u01b0: Adobe Illustrator, Affinity Designer, Sketch l\u00e0 nh\u1eefng ph\u1ea7n m\u1ec1m tr\u1ea3 ph\u00ed ph\u1ed5 bi\u1ebfn v\u00e0 r\u1ea5t nhi\u1ec1u nh\u00e0 thi\u1ebft k\u1ebf tr\u00ean th\u1ebf gi\u1edbi s\u1eed d\u1ee5ng \u0111\u1ec3 thi\u1ebft k\u1ebf h\u00ecnh \u1ea3nh, logo,&#8230;<\/p>\n\n\n\n<p>Nh\u1eefng ph\u1ea7n m\u1ec1m mi\u1ec5n ph\u00ed b\u1ea1n c\u00f3 th\u1ec3 t\u00ecm nh\u01b0: Inkscape, Gravit Designer, Vectr, SVG-Edit, Boxy SVG, Vecteezy,.. \u0111\u00e2y l\u00e0 nh\u1eefng ph\u1ea7n m\u1ec1m mi\u1ec5n ph\u00ed, ph\u1ea7n m\u1ec1m m\u00e3 ngu\u1ed3n m\u1edf b\u1ea1n c\u00f3 th\u1ec3 copy t\u00ean v\u00e0 t\u00ecm tr\u00ean Google \u0111\u1ec3 s\u1eed d\u1ee5ng nh\u00e9!<\/p>\n\n\n\n<h4 id=\"Chuy\u1ec3n_\u0111\u1ed5i_file_\u1ea3nh_kh\u00e1c_sang_SVG\"><a id=\"post-28641-_bobv2kdjfx2q\"><\/a><strong>Chuy\u1ec3n \u0111\u1ed5i file \u1ea3nh kh\u00e1c sang SVG<\/strong><\/h4>\n\n\n\n<p>\u0110\u1ec3 chuy\u1ec3n \u0111\u1ed5i m\u1ed9t h\u00ecnh \u1ea3nh \u1edf \u0111\u1ecbnh d\u1ea1ng kh\u00e1c sang \u0111\u1ecbnh d\u1ea1ng SVG, b\u1ea1n ch\u1ec9 c\u1ea7n l\u00ean Google v\u00e0 t\u00ecm t\u1eeb kh\u00f3a nh\u01b0 sau:<\/p>\n\n\n\n<p><strong>&lt;t\u00ean \u0111\u1ecbnh d\u1ea1ng b\u1ea1n mu\u1ed1n chuy\u1ec3n th\u00e0nh SVG> to SVG<\/strong><\/p>\n\n\n\n<p>s\u1eed d\u1ee5ng ti\u1ebfng Anh t\u00ecm b\u1ea1n s\u1ebd th\u1ea5y r\u1ea5t nhi\u1ec1u trang web chuy\u1ec3n \u0111\u1ed5i r\u1ea5t th\u00fa v\u1ecb. Tino Group khuy\u00ean b\u1ea1n n\u00ean d\u00f9ng:<\/p>\n\n\n\n<p><a href=\"https:\/\/convertio.co\/vn\/png-svg\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">convertio.co<\/a> &#8211; \u0111\u00e2y l\u00e0 m\u1ed9t trang web c\u00f3 th\u1ec3 chuy\u1ec3n \u0111\u1ed5i r\u1ea5t nhi\u1ec1u \u0111\u1ecbnh d\u1ea1ng kh\u00e1c nhau, b\u1ea1n c\u00f3 th\u1ec3 chuy\u1ec3n c\u1ea3 SVG sang m\u1ed9t \u0111\u1ecbnh d\u1ea1ng kh\u00e1c v\u00e0 ng\u01b0\u1ee3c l\u1ea1i ho\u00e0n to\u00e0n mi\u1ec5n ph\u00ed.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1481.png\" alt=\"svg-la-gi\" class=\"wp-image-28644\" width=\"461\" height=\"403\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1481.png 793w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1481-300x263.png 300w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1481-768x672.png 768w\" sizes=\"(max-width: 461px) 100vw, 461px\" \/><\/figure><\/div>\n\n\n\n<p>Ngo\u00e0i ra, b\u1ea1n c\u00f3 th\u1ec3 th\u1eed m\u1ed9t s\u1ed1 trang kh\u00e1c nh\u01b0: <a href=\"https:\/\/www.pngtosvg.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">PNG to SVG<\/a> hay <a href=\"https:\/\/onlineconvertfree.com\/vn\/convert-format\/png-to-svg\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Online Convert Free<\/a>. Nh\u01b0ng trang n\u00e0y \u0111\u1ec1u h\u1ed7 tr\u1ee3 ti\u1ebfng Vi\u1ec7t, v\u00ec th\u1ebf, b\u1ea1n s\u1ebd kh\u00f4ng g\u1eb7p nh\u1eefng kh\u00f3 kh\u0103n trong khi s\u1eed d\u1ee5ng.<\/p>\n\n\n\n<h3 id=\"C\u00e1ch_\u0111\u1ec3_m\u1edf_m\u1ed9t_t\u1ec7p_SVG\"><a id=\"post-28641-_34x725rptcmi\"><\/a><strong>C\u00e1ch \u0111\u1ec3 m\u1edf m\u1ed9t t\u1ec7p SVG<\/strong><\/h3>\n\n\n\n<p>C\u00e1ch \u0111\u01a1n gi\u1ea3n nh\u1ea5t \u0111\u1ec3 m\u1edf m\u1ed9t t\u1ec7p SVG l\u00e0 b\u1ea1n s\u1eed d\u1ee5ng ngay tr\u00ecnh duy\u1ec7t c\u1ee7a m\u00ecnh. H\u1ea7u h\u1ebft c\u00e1c tr\u00ecnh duy\u1ec7t hi\u1ec7n \u0111\u1ea1i \u0111\u1ec1u h\u1ed7 tr\u1ee3 m\u1edf \u0111\u1ecbnh d\u1ea1ng SVG.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5, Tino Group \u0111ang s\u1eed d\u1ee5ng tr\u00ecnh duy\u1ec7t Chrome \u0111\u1ec3 m\u1edf m\u1ed9t file \u0111\u1ecbnh d\u1ea1ng SVG \u1edf \u0111\u1ea7u b\u00e0i.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1482.png\" alt=\"svg-la-gi\" class=\"wp-image-28645\" width=\"604\" height=\"340\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1482.png 1600w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1482-300x169.png 300w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1482-1024x576.png 1024w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1482-768x432.png 768w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1482-1536x864.png 1536w\" sizes=\"(max-width: 604px) 100vw, 604px\" \/><\/figure><\/div>\n\n\n\n<p>Ch\u1ec9 nh\u1eefng tr\u00ecnh duy\u1ec7t t\u1eeb Internet Explorer 8 s\u1ebd kh\u00f4ng h\u1ed7 tr\u1ee3 \u0111\u1ecbnh d\u1ea1ng SVG. N\u1ebfu tr\u00ecnh duy\u1ec7t c\u1ee7a b\u1ea1n kh\u00f4ng th\u1ec3 m\u1edf m\u1ed9t t\u1ec7p SVG, b\u1ea1n c\u00f3 th\u1ec3 n\u00ean th\u1eed n\u00e2ng c\u1ea5p tr\u00ecnh duy\u1ec7t c\u1ee7a m\u00ecnh ho\u1eb7c m\u1edf b\u1eb1ng c\u00e1c \u1ee9ng d\u1ee5ng tr\u1ef1c tuy\u1ebfn nh\u01b0:<\/p>\n\n\n\n<p><a href=\"https:\/\/www.freecodeformat.com\/svg-editor.php\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Freecodeformat<\/a> &#8211; T\u1ea1i trang web n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 th\u1eed code m\u1ed9t \u1ea3nh SVG cho b\u1ea3n th\u00e2n.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1483.png\" alt=\"svg-la-gi\" class=\"wp-image-28646\" width=\"486\" height=\"424\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1483.png 795w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1483-300x262.png 300w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1483-768x671.png 768w\" sizes=\"(max-width: 486px) 100vw, 486px\" \/><\/figure><\/div>\n\n\n\n<p>Qua b\u00e0i vi\u1ebft, Tino Group hy v\u1ecdng \u0111\u00e3 mang l\u1ea1i nh\u1eefng ki\u1ebfn th\u1ee9c b\u1ed5 \u00edch cho b\u1ea1n v\u1ec1 \u0111\u1ecbnh d\u1ea1ng SVG l\u00e0 g\u00ec c\u0169ng nh\u01b0 nh\u1eefng c\u00e1ch \u0111\u1ec3 t\u1ea1o, s\u1eeda \u0111\u1ed5i v\u00e0 s\u1eed d\u1ee5ng h\u00ecnh \u1ea3nh SVG m\u1ed9t c\u00e1ch hi\u1ec7u qu\u1ea3. TinoHost mong b\u1ea1n c\u00f3 th\u1ec3 lu\u00f4n t\u1ea1o ra \u0111\u01b0\u1ee3c nh\u1eefng website \u0111\u1ed9ng th\u1eadt b\u1eaft m\u1eaft nh\u00e9!<\/p>\n\n\n\n<h2 id=\"Nh\u1eefng_c\u00e2u_h\u1ecfi_th\u01b0\u1eddng_g\u1eb7p_v\u1ec1_SVG\"><a id=\"post-28641-_rl0mzxx1cx5\"><\/a><strong>Nh\u1eefng c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 SVG<\/strong><\/h2>\n\n\n\t\t<section\t\thelp class=\"sc_fs_faq sc_card    \"\n\t\t\t\t>\n\t\t\t\t<h2 id=\"V\u00ec_sao_\u1ea3nh_SVG_kh\u00f4ng_hi\u1ec3n_th\u1ecb_tr\u00ean_web?\">V\u00ec sao \u1ea3nh SVG kh\u00f4ng hi\u1ec3n th\u1ecb tr\u00ean web?<\/h2>\t\t\t\t<div>\n\t\t\t\t\t\t<div class=\"sc_fs_faq__content\">\n\t\t\t\t\n\n<p>C\u00f3 th\u1ec3 trong qu\u00e1 tr\u00ecnh \u0111\u0103ng t\u1ea3i hay code ra SVG, b\u1ea1n \u0111\u00e3 v\u00f4 t\u00ecnh qu\u00ean kh\u00f4ng x\u00e1c \u0111\u1ecbnh thu\u1ed9c t\u00ednh width v\u00e0 height c\u1ee7a \u1ea3nh, v\u00ec v\u1eady \u1ea3nh s\u1ebd b\u1ecb hi\u1ec3n th\u1ecb m\u1eb7c \u0111\u1ecbnh l\u00e0 max width = 0 v\u00e0 b\u1ea1n kh\u00f4ng th\u1ec3 nh\u00ecn th\u1ea5y \u1ea3nh.<\/p>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section\t\thelp class=\"sc_fs_faq sc_card    \"\n\t\t\t\t>\n\t\t\t\t<h2 id=\"N\u00ean_s\u1eed_d\u1ee5ng_nh\u1eefng_\u1ea3nh_ph\u1ee9c_t\u1ea1p_v\u1edbi_\u0111\u1ecbnh_d\u1ea1ng_SVG_hay_kh\u00f4ng?\">N\u00ean s\u1eed d\u1ee5ng nh\u1eefng \u1ea3nh ph\u1ee9c t\u1ea1p v\u1edbi \u0111\u1ecbnh d\u1ea1ng SVG hay kh\u00f4ng?<\/h2>\t\t\t\t<div>\n\t\t\t\t\t\t<div class=\"sc_fs_faq__content\">\n\t\t\t\t\n\n<p>\u0110\u1ed1i v\u1edbi c\u00e1c \u1ea3nh qu\u00e1 ph\u1ee9c t\u1ea1p s\u1ebd c\u00f3 nhi\u1ec1u vector s\u1ebd l\u00e0m \u1ea3nh c\u1ee7a b\u1ea1n tr\u1edf n\u00ean r\u1ea5t n\u1eb7ng v\u00e0 \u0111\u00f4i khi website kh\u00f4ng th\u1ec3 t\u1ea3i n\u1ed7i. V\u00ec v\u1eady, n\u1ebfu s\u1eed d\u1ee5ng code \u0111\u1ec3 t\u1ea1o SVG, b\u1ea1n n\u00ean t\u1ea1o m\u1ed9t s\u1ed1 h\u00ecnh th\u00f9 kh\u00f4ng qu\u00e1 ph\u1ee9c t\u1ea1p \u0111\u1ec3 h\u00ecnh \u1ea3nh b\u1eb1ng \u0111\u1ecbnh d\u1ea1ng SVG \u0111\u1ee7 nh\u1eb9 \u0111\u1ec3 ch\u1ea1y tr\u00ean website.<\/p>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section\t\thelp class=\"sc_fs_faq sc_card    \"\n\t\t\t\t>\n\t\t\t\t<h2 id=\"Internet_Explorer_8_c\u00f3_h\u1ed7_tr\u1ee3_SVG_hay_kh\u00f4ng?\">Internet Explorer 8 c\u00f3 h\u1ed7 tr\u1ee3 SVG hay kh\u00f4ng?<\/h2>\t\t\t\t<div>\n\t\t\t\t\t\t<div class=\"sc_fs_faq__content\">\n\t\t\t\t\n\n<p>N\u1ebfu b\u1ea1n v\u1eabn ch\u1ecdn c\u00e1ch s\u1eed d\u1ee5ng tr\u00ecnh duy\u1ec7t Internet Explorer 8 c\u1ed5\u2026 B\u1ea1n c\u00f3 th\u1ec3 th\u1eed c\u00e0i \u0111\u1eb7t m\u1ed9t s\u1ed1 plugin \u0111\u1ec3 tr\u00ecnh duy\u1ec7t Internet Explorer 8 c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb h\u00ecnh \u1ea3nh c\u1ee7a file SVG b\u1ea1n nh\u00e9!<\/p>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section\t\thelp class=\"sc_fs_faq sc_card    \"\n\t\t\t\t>\n\t\t\t\t<h2 id=\"V\u00ec_sao_\u1ea3nh_SVG_b\u1ecb_thay_\u0111\u1ed5i_khi_\u0111\u1ed5i_code_CSS?\">V\u00ec sao \u1ea3nh SVG b\u1ecb thay \u0111\u1ed5i khi \u0111\u1ed5i code CSS?<\/h2>\t\t\t\t<div>\n\t\t\t\t\t\t<div class=\"sc_fs_faq__content\">\n\t\t\t\t\n\n<p>Khi ch\u1ec9nh s\u1eeda \u1ea3nh b\u1eb1ng code CSS, b\u1ea5t k\u1ef3 thu\u1ed9c t\u00ednh n\u00e0o c\u1ee7a SVG s\u1ebd b\u1ecb ghi \u0111\u00e8 do c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a CSS n\u1eb1m \u1edf m\u1ee9c \u01b0u ti\u00ean cao h\u01a1n.<\/p>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/section>\n\t\t\n<script type=\"application\/ld+json\">\n\t{\n\t\t\"@context\": \"https:\/\/schema.org\",\n\t\t\"@type\": \"FAQPage\",\n\t\t\"mainEntity\": [\n\t\t\t\t\t{\n\t\t\t\t\"@type\": \"Question\",\n\t\t\t\t\"name\": \"V\u00ec sao \u1ea3nh SVG kh\u00f4ng hi\u1ec3n th\u1ecb tr\u00ean web?\",\n\t\t\t\t\"acceptedAnswer\": {\n\t\t\t\t\t\"@type\": \"Answer\",\n\t\t\t\t\t\"text\": \"<p>C\u00f3 th\u1ec3 trong qu\u00e1 tr\u00ecnh \u0111\u0103ng t\u1ea3i hay code ra SVG, b\u1ea1n \u0111\u00e3 v\u00f4 t\u00ecnh qu\u00ean kh\u00f4ng x\u00e1c \u0111\u1ecbnh thu\u1ed9c t\u00ednh width v\u00e0 height c\u1ee7a \u1ea3nh, v\u00ec v\u1eady \u1ea3nh s\u1ebd b\u1ecb hi\u1ec3n th\u1ecb m\u1eb7c \u0111\u1ecbnh l\u00e0 max width = 0 v\u00e0 b\u1ea1n kh\u00f4ng th\u1ec3 nh\u00ecn th\u1ea5y \u1ea3nh.<\/p>\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t}\n\t\t\t,\t\t\t\t{\n\t\t\t\t\"@type\": \"Question\",\n\t\t\t\t\"name\": \"N\u00ean s\u1eed d\u1ee5ng nh\u1eefng \u1ea3nh ph\u1ee9c t\u1ea1p v\u1edbi \u0111\u1ecbnh d\u1ea1ng SVG hay kh\u00f4ng?\",\n\t\t\t\t\"acceptedAnswer\": {\n\t\t\t\t\t\"@type\": \"Answer\",\n\t\t\t\t\t\"text\": \"<p>\u0110\u1ed1i v\u1edbi c\u00e1c \u1ea3nh qu\u00e1 ph\u1ee9c t\u1ea1p s\u1ebd c\u00f3 nhi\u1ec1u vector s\u1ebd l\u00e0m \u1ea3nh c\u1ee7a b\u1ea1n tr\u1edf n\u00ean r\u1ea5t n\u1eb7ng v\u00e0 \u0111\u00f4i khi website kh\u00f4ng th\u1ec3 t\u1ea3i n\u1ed7i. V\u00ec v\u1eady, n\u1ebfu s\u1eed d\u1ee5ng code \u0111\u1ec3 t\u1ea1o SVG, b\u1ea1n n\u00ean t\u1ea1o m\u1ed9t s\u1ed1 h\u00ecnh th\u00f9 kh\u00f4ng qu\u00e1 ph\u1ee9c t\u1ea1p \u0111\u1ec3 h\u00ecnh \u1ea3nh b\u1eb1ng \u0111\u1ecbnh d\u1ea1ng SVG \u0111\u1ee7 nh\u1eb9 \u0111\u1ec3 ch\u1ea1y tr\u00ean website.<\/p>\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t}\n\t\t\t,\t\t\t\t{\n\t\t\t\t\"@type\": \"Question\",\n\t\t\t\t\"name\": \"Internet Explorer 8 c\u00f3 h\u1ed7 tr\u1ee3 SVG hay kh\u00f4ng?\",\n\t\t\t\t\"acceptedAnswer\": {\n\t\t\t\t\t\"@type\": \"Answer\",\n\t\t\t\t\t\"text\": \"<p>N\u1ebfu b\u1ea1n v\u1eabn ch\u1ecdn c\u00e1ch s\u1eed d\u1ee5ng tr\u00ecnh duy\u1ec7t Internet Explorer 8 c\u1ed5\u2026 B\u1ea1n c\u00f3 th\u1ec3 th\u1eed c\u00e0i \u0111\u1eb7t m\u1ed9t s\u1ed1 plugin \u0111\u1ec3 tr\u00ecnh duy\u1ec7t Internet Explorer 8 c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb h\u00ecnh \u1ea3nh c\u1ee7a file SVG b\u1ea1n nh\u00e9!<\/p>\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t}\n\t\t\t,\t\t\t\t{\n\t\t\t\t\"@type\": \"Question\",\n\t\t\t\t\"name\": \"V\u00ec sao \u1ea3nh SVG b\u1ecb thay \u0111\u1ed5i khi \u0111\u1ed5i code CSS?\",\n\t\t\t\t\"acceptedAnswer\": {\n\t\t\t\t\t\"@type\": \"Answer\",\n\t\t\t\t\t\"text\": \"<p>Khi ch\u1ec9nh s\u1eeda \u1ea3nh b\u1eb1ng code CSS, b\u1ea5t k\u1ef3 thu\u1ed9c t\u00ednh n\u00e0o c\u1ee7a SVG s\u1ebd b\u1ecb ghi \u0111\u00e8 do c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a CSS n\u1eb1m \u1edf m\u1ee9c \u01b0u ti\u00ean cao h\u01a1n.<\/p>\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t}\n\t\t\t\t\t\t]\n\t}\n<\/script>\n\n\n","protected":false},"excerpt":{"rendered":"<p>B\u1ea1n quan t\u00e2m l\u00fd do v\u00ec sao m\u1ed9t s\u1ed1 \u1ea3nh tr\u00ean web l\u1ea1i b\u1ecb v\u1ee1 h\u1ea1t, m\u1ed9t s\u1ed1 l\u1ea1i kh\u00f4ng khi b\u1ea1n ph\u00f3ng to \u1ea3nh, c\u0169ng nh\u01b0 c\u00e1ch l\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 th\u1ef1c hi\u1ec7n \u0111\u01b0\u1ee3c t\u01b0\u01a1ng t\u1ef1? V\u1eady, trong b\u00e0i vi\u1ebft n\u00e0y, Tino Group s\u1ebd gi\u00fap b\u1ea1n gi\u1ea3i \u0111\u00e1p b\u00ed m\u1eadt t\u1ea1o \u1ea3nh b\u1eb1ng \u0111\u1ecbnh [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":28642,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5404],"tags":[6242],"class_list":["post-28641","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webmasters","tag-kien-thuc-website"],"_links":{"self":[{"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/posts\/28641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/comments?post=28641"}],"version-history":[{"count":0,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/posts\/28641\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/media\/28642"}],"wp:attachment":[{"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/media?parent=28641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/categories?post=28641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/tags?post=28641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}