From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/vi/web/svg/tutorial/index.html | 59 ++++++++++++++++++++++ files/vi/web/svg/tutorial/svg_image_tag/index.html | 32 ++++++++++++ 2 files changed, 91 insertions(+) create mode 100644 files/vi/web/svg/tutorial/index.html create mode 100644 files/vi/web/svg/tutorial/svg_image_tag/index.html (limited to 'files/vi/web/svg/tutorial') diff --git a/files/vi/web/svg/tutorial/index.html b/files/vi/web/svg/tutorial/index.html new file mode 100644 index 0000000000..bc313966be --- /dev/null +++ b/files/vi/web/svg/tutorial/index.html @@ -0,0 +1,59 @@ +--- +title: SVG Tutorial +slug: Web/SVG/Tutorial +tags: + - Intermediate + - NeedsContent + - NeedsHelp + - NeedsTranslation + - NeedsUpdate + - SVG + - 'SVG:Tutorial' + - TopicStub +translation_of: Web/SVG/Tutorial +--- +

Scalable Vector Graphics, SVG, is a W3C XML dialect to mark up graphics. It is partially implemented in Firefox, Opera, WebKit browsers, Internet Explorer and other browsers.

+ +

This tutorial aims to explain the internals of SVG and is packed with technical details. If you just want to draw beautiful images, you might find more useful resources at Inkscape's documentation page. Another good introduction to SVG is provided by the W3C's SVG Primer.

+ +
The tutorial is in an early stage of development. If you're able, please help out by chipping in and writing a paragraph or two. Extra points for writing a whole page!
+ +
Introducing SVG from Scratch
+ + + +

The following topics are more advanced and hence should get their own tutorials.

+ +
Scripting SVG with JavaScript
+ +

TBD

+ +
SVG filters tutorial
+ +

TBD

+ +
Animations with SMIL in SVG
+ +

TBD

+ +
Creating fonts in SVG
+ +

TBD

diff --git a/files/vi/web/svg/tutorial/svg_image_tag/index.html b/files/vi/web/svg/tutorial/svg_image_tag/index.html new file mode 100644 index 0000000000..9b5c077b20 --- /dev/null +++ b/files/vi/web/svg/tutorial/svg_image_tag/index.html @@ -0,0 +1,32 @@ +--- +title: SVG image element +slug: Web/SVG/Tutorial/SVG_Image_Tag +translation_of: Web/SVG/Tutorial/SVG_Image_Tag +--- +

{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}

+ +

Element SVG {{ SVGElement("image") }} cho phép bạn hiển thị hình ảnh bên trong một object SVG:

+ +

TRong ví dụ đơn giản này, một ảnh jpg được tham chiếu bởi một thuộc tính {{ SVGAttr("href") }} sẽ hiển thị bên trong một object SVG:

+ +
<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="5cm" height="4cm" version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
+	<image href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
+</svg>
+ +

Đây là một vài điều quan trọng bạn cần lưu ý (được tham khảo từ W3 specs):

+ + + +

{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}

-- cgit v1.2.3-54-g00ecf