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/index.html | 94 ++++++++++++++++++++++ files/vi/web/svg/tutorial/index.html | 59 ++++++++++++++ files/vi/web/svg/tutorial/svg_image_tag/index.html | 32 ++++++++ 3 files changed, 185 insertions(+) create mode 100644 files/vi/web/svg/index.html 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') diff --git a/files/vi/web/svg/index.html b/files/vi/web/svg/index.html new file mode 100644 index 0000000000..b342e1ceb9 --- /dev/null +++ b/files/vi/web/svg/index.html @@ -0,0 +1,94 @@ +--- +title: SVG +slug: Web/SVG +tags: + - 2D Graphics + - Graphics + - NeedsTranslation + - Reference + - SVG + - TopicStub + - Web + - 'l10n:priority' +translation_of: Web/SVG +--- +
Getting Started
+This tutorial will help get you started using SVG.
+ +

Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional vector graphics. SVG is essentially to graphics what HTML is to text.

+ +

SVG is similar to Adobe's proprietary Flash technology, but it is a text-based open Web standard instead of a closed binary format. It is explicitly designed to work with other web standards such as CSS, DOM, and SMIL.

+ +
+
+

Documentation

+ +
+
SVG element reference
+
Details about each SVG element.
+
SVG attribute reference
+
Details about each SVG attribute.
+
SVG DOM interface reference
+
Details about the SVG DOM API, for interaction with JavaScript.
+
Applying SVG effects to HTML content
+
SVG works together with {{Glossary("HTML")}}, {{Glossary("CSS")}} and {{Glossary("JavaScript")}}. Use SVG to enhance a regular HTML page or web application.
+
+ +

View All...

+ +

Community

+ +
    +
  • View Mozilla forums... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}
    • +
+ +

Tools

+ + +
+ +
+ + + + +

Animation and interactions

+ +

Like HTML, SVG has a document model (DOM) and events, and is accessible from JavaScript. This allows developers to create rich animations and interactive images.

+ + + +

Mapping, charting, games & 3D experiments

+ +

While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.

+ + +
+
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