What Is An SVG Document? A Comprehensive Guide

What Is An Svg Document? It’s a vector-based image format, and understanding its capabilities can significantly enhance your web design and graphic creation skills. At WHAT.EDU.VN, we aim to provide clear and accessible explanations, ensuring you grasp the essentials of SVG files. Explore how scalable vector graphics can revolutionize your projects with their versatility and quality. Discover the benefits and uses of vector images to elevate your designs.

1. Understanding SVG Documents

A Scalable Vector Graphic (SVG) is a unique image format that, unlike raster formats like JPEG or PNG, uses mathematical formulas to define images rather than a grid of pixels. This key difference makes SVG documents incredibly versatile for various applications.

1.1. Vector vs. Raster Graphics

To truly understand what an SVG document is, you need to know the difference between vector and raster graphics.

Raster Graphics: These images are composed of pixels. Each pixel contains color information, and together, they form the image. Examples include JPEGs, PNGs, and GIFs. When you zoom in on a raster image, you’ll eventually see the individual pixels, resulting in a loss of quality.
Vector Graphics: These images are made up of paths, which are defined by mathematical equations. This means they can be scaled infinitely without losing quality. SVG is the primary format for vector graphics on the web.

Alt text: A comparison of raster and vector graphics, highlighting how vector images retain quality upon scaling while raster images become pixelated.

1.2. The Anatomy of an SVG Document

SVG documents are essentially XML files that describe the shapes, colors, and text that make up an image. Here’s a simplified breakdown:

XML Structure: SVG files begin with an XML declaration, defining the document as XML.
<svg> Element: This is the root element that encapsulates the entire SVG image. It defines the canvas size and coordinate system.
Shapes: Elements like <circle>, <rect>, <line>, <polygon>, and <path> define the visual elements of the image. Each element has attributes that specify its position, size, color, and other properties.
Paths: The <path> element is the most versatile, allowing you to create complex shapes using a series of commands that define lines, curves, and arcs.
Text: The <text> element allows you to add text to your SVG image, with attributes for font, size, and styling.
Gradients and Patterns: SVG supports gradients and patterns for adding rich visual effects to your shapes.
Filters: You can apply filters to SVG elements to create effects like shadows, blurs, and color adjustments.
Metadata: SVG documents can include metadata, such as titles, descriptions, and copyright information.

1.3. Code Example of an SVG Document

Here’s a basic example of an SVG document that creates a red circle:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

In this code:

<?xml version="1.0" encoding="UTF-8"?> declares the XML version and encoding.
<svg width="100" height="100"> sets the width and height of the SVG canvas to 100×100 pixels.
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> draws a circle with its center at (50, 50), a radius of 40, a black border of 3 pixels, and a red fill.

1.4. Key Characteristics of SVG Documents

Scalability: SVG documents can be scaled up or down without any loss of quality. This makes them ideal for responsive web design and high-resolution displays.
Accessibility: SVG documents are XML-based, meaning their content is accessible to screen readers and search engines. You can add accessibility attributes to further improve usability.
Interactivity: SVG documents can be animated and made interactive using CSS and JavaScript. This opens up possibilities for creating dynamic graphics and user interfaces.
Small File Size: For simple graphics, SVG files are often smaller than their raster counterparts. This can lead to faster loading times and improved website performance.
Programmability: SVG documents can be manipulated programmatically, allowing you to create data-driven visualizations and dynamic graphics.

1.5. How Browsers Handle SVG Documents

Modern web browsers have native support for SVG documents. This means you can embed SVG images directly into your HTML code using the <img> tag, the <object> tag, or as inline SVG.

<img> Tag: This is the simplest way to include an SVG image in your HTML. However, it treats the SVG as a static image, preventing you from manipulating its individual elements with CSS or JavaScript.
<object> Tag: This tag allows you to embed an SVG document as an external resource. It offers more flexibility than the <img> tag, but can be less convenient to work with.
Inline SVG: This involves embedding the SVG code directly into your HTML. This gives you full control over the SVG’s elements, allowing you to style and animate them with CSS and JavaScript.

For example:

<!DOCTYPE html>
<html>
<head>
  <title>SVG Example</title>
</head>
<body>

  <h1>Using IMG Tag</h1>
  <img src="circle.svg" alt="Red Circle">

  <h1>Using OBJECT Tag</h1>
  <object data="circle.svg" type="image/svg+xml">
     Fallback content here if the browser doesn't support SVGs
  </object>

  <h1>Inline SVG</h1>
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>

</body>
</html>

1.6. Benefits of Using SVG Documents

Resolution Independence: Ensures sharp visuals on any screen.
Smaller File Sizes: Improves website loading times.
Accessibility: Enhances usability for all users.
Animation Capabilities: Allows for dynamic and engaging graphics.
SEO Friendly: Improves search engine visibility.

2. Why Use an SVG Document?

SVG documents offer numerous advantages over traditional image formats, making them an ideal choice for various applications. Understanding these benefits can help you make informed decisions about when and how to use SVGs in your projects.

2.1. Scalability Without Loss of Quality

The primary advantage of SVG documents is their ability to scale without losing quality. Because they are based on mathematical formulas rather than pixels, SVG images remain crisp and clear at any size.

Consider a logo that needs to be displayed on a small mobile screen and a large desktop monitor. If the logo is saved as a raster image, it may appear pixelated or blurry on the larger screen. However, if the logo is saved as an SVG, it will maintain its sharpness and clarity on both devices.

2.2. Small File Sizes

SVG files are typically smaller than their raster counterparts, especially for simple graphics. This is because they store information as mathematical instructions rather than detailed pixel data.

Smaller file sizes lead to faster loading times, which can significantly improve website performance and user experience. This is particularly important for mobile users and those with slow internet connections.

2.3. Accessibility and SEO Benefits

SVG documents are XML-based, which means their content is accessible to screen readers and search engines. You can add text descriptions and other metadata to SVG elements to further improve accessibility and SEO.

Search engines can index the text within SVG files, which can help improve your website’s search engine ranking. Additionally, screen readers can interpret the content of SVG images, making your website more accessible to users with disabilities.

2.4. Animation and Interactivity

SVG documents can be animated and made interactive using CSS and JavaScript. This opens up a wide range of possibilities for creating engaging and dynamic user interfaces.

You can animate SVG elements to create subtle effects, such as hover animations or loading indicators. You can also use JavaScript to create interactive graphics, such as charts and diagrams that respond to user input.

2.5. Use Cases for SVG Documents

Logos: SVG is ideal for logos because they need to be scalable and maintain their quality at any size.
Icons: SVG icons are small, scalable, and easy to customize.
Illustrations: SVG can be used to create detailed illustrations with clean lines and smooth curves.
Charts and Graphs: SVG is perfect for creating dynamic and interactive charts and graphs.
Maps: SVG can be used to create interactive maps with zoom and pan functionality.
Animations: SVG is a great choice for creating web animations and microinteractions.

Alt text: The homepage of Vector Magic, an online tool for converting raster images to scalable vector graphics.

2.6. Real-World Examples

Website Logos: Many modern websites use SVG logos to ensure they look crisp on all devices.
Interactive Maps: Online maps often use SVG to allow users to zoom and pan without losing detail.
Data Visualizations: Dashboards and reporting tools use SVG charts and graphs to present data in a clear and interactive way.
Animated Icons: Mobile apps and websites use animated SVG icons to provide visual feedback to users.

2.7. When to Avoid Using SVG Documents

While SVG documents offer many advantages, they are not always the best choice. Here are some situations where you might want to consider using a different image format:

Photorealistic Images: SVG is not well-suited for complex, photorealistic images. Raster formats like JPEG are better for these types of images.
Images with Subtle Gradients and Textures: SVG can struggle to reproduce subtle gradients and textures accurately. Raster formats may be a better choice in these cases.
Very Large Images: SVG files can become very large and complex for highly detailed images. This can lead to performance issues.

2.8. Making an Informed Decision

When choosing between SVG and other image formats, consider the following factors:

Image Complexity: How complex is the image? Simple graphics are usually better suited for SVG, while complex images may be better suited for raster formats.
Scalability Requirements: Does the image need to be scalable? If so, SVG is the clear choice.
File Size Requirements: How important is file size? SVG files are typically smaller than raster files for simple graphics.
Accessibility Requirements: Does the image need to be accessible to screen readers? If so, SVG is a good choice.
Animation Requirements: Does the image need to be animated? If so, SVG is a great choice.

2.9. The Future of SVG

SVG documents continue to evolve, with new features and capabilities being added all the time. As web browsers and design tools improve their support for SVG, it is likely to become an even more popular choice for web graphics.

Some of the exciting developments in the world of SVG include:

Improved Animation Capabilities: New CSS and JavaScript APIs are making it easier to create complex SVG animations.
Better Integration with Web Components: SVG is being integrated more closely with web components, allowing developers to create reusable SVG elements.
Enhanced Accessibility Features: New accessibility attributes and techniques are making SVG documents more accessible to users with disabilities.

By understanding the benefits and limitations of SVG documents, you can make informed decisions about when and how to use them in your projects. This can lead to improved website performance, better user experience, and enhanced accessibility.

3. How to Create an SVG Document (2 Ways)

Creating SVG documents can be done in several ways, either manually through code or by converting existing images using various tools. Here are two primary methods to get started with SVG.

3.1. Creating SVG Documents Manually

Creating an SVG document manually involves writing the XML code that defines the image. While this may seem daunting at first, it gives you complete control over every aspect of the graphic.

3.1.1. Tools for Manual Creation

Text Editors: Any text editor can be used to write SVG code. However, editors with syntax highlighting and code completion can make the process easier.
Code Editors: Specialized code editors like Visual Studio Code, Sublime Text, and Atom offer features that are particularly useful for working with XML and SVG.
Web Browsers: Modern web browsers can be used to preview SVG code. Simply save your code as an .svg file and open it in your browser.

3.1.2. Basic SVG Elements

To create SVG documents manually, you need to understand the basic SVG elements:

<svg>: The root element that defines the SVG canvas.
<rect>: Creates a rectangle.
<circle>: Creates a circle.
<ellipse>: Creates an ellipse.
<line>: Creates a line.
<polyline>: Creates a series of connected lines.
<polygon>: Creates a closed shape with multiple sides.
<path>: Creates complex shapes using a series of commands.
<text>: Adds text to the SVG image.

Each element has attributes that define its properties, such as position, size, color, and style.

3.1.3. Example: Creating a Simple SVG

Here’s an example of how to create a simple SVG document manually:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="200" height="100">
  <rect width="100%" height="100%" fill="lightblue" />
  <circle cx="70" cy="50" r="40" fill="red" />
  <text x="120" y="50" font-size="20" fill="white" text-anchor="middle">SVG</text>
</svg>

This code creates an SVG image with a light blue background, a red circle, and the text “SVG” in white.

3.1.4. Advantages of Manual Creation

Full Control: You have complete control over every aspect of the graphic.
Optimization: You can optimize the SVG code for file size and performance.
Learning: You gain a deeper understanding of SVG syntax and capabilities.

3.1.5. Disadvantages of Manual Creation

Time-Consuming: It can be time-consuming to create complex graphics manually.
Requires Expertise: It requires a good understanding of SVG syntax and concepts.
Error-Prone: It can be easy to make mistakes when writing code manually.

3.2. Converting Existing Images to SVG Documents

Converting existing images to SVG documents is a quick and easy way to create vector graphics. There are many tools available that can convert raster images (like JPEGs and PNGs) to SVG format.

3.2.1. Tools for Image Conversion

Adobe Illustrator: A professional vector graphics editor that can open raster images and save them as SVG files.
Inkscape: A free and open-source vector graphics editor that can convert raster images to SVG format.
Online Converters: Many online tools can convert images to SVG format. Some popular options include Vector Magic, Convertio, and Img2Go.

3.2.2. How to Convert Images to SVG

The process of converting images to SVG varies depending on the tool you are using. However, the basic steps are generally the same:

Open the Image: Open the raster image in your chosen tool.
Trace the Image: Most conversion tools use a process called “tracing” to convert the raster image to vector paths. This involves identifying the outlines and shapes in the image and creating vector paths that follow those outlines.
Adjust Settings: Adjust the tracing settings to optimize the conversion. This may involve adjusting the level of detail, the smoothness of the paths, and the number of colors.
Save as SVG: Save the converted image as an SVG file.

3.2.3. Tips for Successful Conversion

Use High-Resolution Images: Start with a high-resolution raster image to get the best results.
Simplify the Image: Simplify the image as much as possible before converting it. This will make the tracing process easier and result in a cleaner SVG file.
Adjust Tracing Settings: Experiment with the tracing settings to find the optimal settings for your image.
Clean Up the SVG: After converting the image, clean up the SVG code to remove any unnecessary elements or paths.

3.2.4. Advantages of Image Conversion

Quick and Easy: It’s a quick and easy way to create SVG documents.
No Coding Required: You don’t need to know how to write SVG code.
Versatile: You can convert a wide variety of images to SVG format.

3.2.5. Disadvantages of Image Conversion

May Not Be Perfect: The converted SVG may not be a perfect representation of the original image.
Can Be Complex: The SVG code can be complex and difficult to edit manually.
File Size: The SVG file can be larger than a manually created SVG file.

3.3. Choosing the Right Method

The best method for creating SVG documents depends on your specific needs and skills. If you need complete control over every aspect of the graphic and are comfortable writing code, manual creation may be the best choice. If you need to quickly convert an existing image to SVG format, image conversion may be a better option.

3.4. Popular Software Options

Adobe Illustrator: Industry-standard vector graphics software.
Inkscape: Free and open-source alternative to Illustrator.
GIMP: Open-source raster graphics editor with some vector capabilities.

3.5. Free Online Conversion Tools

Vector Magic: Converts raster images to vector graphics with high precision.
Convertio: Versatile online converter supporting many file formats.
Img2Go: Online image editor and converter with SVG support.

4. How to Use an SVG Document (In and Out of WordPress)

Using SVG documents effectively involves knowing how to integrate them into web projects, whether you’re working within a Content Management System (CMS) like WordPress or coding from scratch. Here’s a guide to help you use SVG files seamlessly.

4.1. Using SVG Documents in HTML

There are several ways to include SVG documents in your HTML code:

4.1.1. `<img>` Tag

The simplest way to include an SVG image is by using the <img> tag:

<img src="my-image.svg" alt="My SVG Image">

This method treats the SVG as a static image. While it’s easy to implement, you cannot manipulate the SVG’s individual elements with CSS or JavaScript.

4.1.2. `<object>` Tag

The <object> tag allows you to embed an SVG document as an external resource:

<object data="my-image.svg" type="image/svg+xml">
  Fallback content here if the browser doesn't support SVGs
</object>

This method offers more flexibility than the <img> tag, but it can be less convenient to work with.

4.1.3. Inline SVG

Inline SVG involves embedding the SVG code directly into your HTML:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

This method gives you full control over the SVG’s elements, allowing you to style and animate them with CSS and JavaScript. It’s the most flexible option but can make your HTML code longer and harder to read.

4.2. Styling SVG Documents with CSS

One of the key advantages of using SVG documents is the ability to style them with CSS. You can change the color, size, position, and other properties of SVG elements using CSS selectors.

4.2.1. Inline Styles

You can apply CSS styles directly to SVG elements using the style attribute:

<circle cx="50" cy="50" r="40" style="fill: red; stroke: black; stroke-width: 3px;" />

4.2.2. Internal Styles

You can include CSS styles within the SVG document using the <style> tag:

<svg width="100" height="100">
  <style>
    circle {
      fill: red;
      stroke: black;
      stroke-width: 3px;
    }
  </style>
  <circle cx="50" cy="50" r="40" />
</svg>

4.2.3. External Stylesheets

You can link to an external stylesheet using the <link> tag:

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" class="red-circle" />
  </svg>
</body>

In your styles.css file:

.red-circle {
  fill: red;
  stroke: black;
  stroke-width: 3px;
}

4.3. Animating SVG Documents with CSS and JavaScript

SVG documents can be animated using CSS transitions and animations, as well as JavaScript.

4.3.1. CSS Animations

You can use CSS animations to create simple animations, such as transitions and keyframe animations:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" class="animated-circle" />
</svg>

.animated-circle {
  fill: red;
  transition: fill 1s ease-in-out;
}

.animated-circle:hover {
  fill: blue;
}

This code will change the circle’s fill color from red to blue on hover.

4.3.2. JavaScript Animations

For more complex animations, you can use JavaScript libraries like GreenSock Animation Platform (GSAP) or Anime.js:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" id="animated-circle" />
</svg>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script>
  gsap.to("#animated-circle", {
    duration: 2,
    x: 100,
    fill: "blue",
    repeat: -1,
    yoyo: true
  });
</script>

This code will animate the circle, moving it horizontally and changing its fill color repeatedly.

4.4. Using SVG Documents in WordPress

WordPress does not support SVG uploads by default due to security concerns. To enable SVG support, you can use a plugin or manually add code to your theme.

4.4.1. Using the Safe SVG Plugin

The Safe SVG plugin is a popular choice for enabling SVG support in WordPress. It allows you to upload SVG files to your media library and use them in your posts and pages.

Install the Plugin: Go to your WordPress admin panel, navigate to Plugins > Add New, and search for “Safe SVG.” Install and activate the plugin.
Upload SVG Files: You can now upload SVG files to your media library like any other image.
Use SVG Files: Insert the SVG files into your posts and pages using the media library.

4.4.2. Manual Method

You can also enable SVG support manually by adding code to your theme’s functions.php file:

function add_svg_to_upload_mimes( $mime_types ) {
  $mime_types['svg'] = 'image/svg+xml';
  return $mime_types;
}
add_filter( 'upload_mimes', 'add_svg_to_upload_mimes' );

function verify_svg_size( $file ) {
  $svg = simplexml_load_file( $file['tmp_name'] );
  $attributes = $svg->attributes();
  $width = (string) $attributes->width;
  $height = (string) $attributes->height;

  if ( empty( $width ) || empty( $height ) || $width > 1000 || $height > 1000 ) {
    $file['error'] = 'SVG width and height must be defined and not exceed 1000px.';
  }

  return $file;
}
add_filter( 'wp_handle_upload_prefilter', 'verify_svg_size' );

This code allows you to upload SVG files and checks their size to prevent potential security issues.

4.4.3. Displaying SVG Files in WordPress

Once you have enabled SVG support, you can display SVG files in your posts and pages using the <img> tag or by embedding the SVG code directly into your content.

4.5. Optimizing SVG Documents for the Web

To ensure optimal performance, it’s important to optimize SVG documents for the web. Here are some tips:

Minimize File Size: Remove unnecessary elements, attributes, and metadata from the SVG code.
Use CSS for Styling: Use CSS for styling instead of inline styles.
Compress SVG Files: Use a tool like SVGO to compress SVG files.
Use a CDN: Use a Content Delivery Network (CDN) to serve SVG files from a server that is geographically close to your users.

4.6. Accessibility Considerations

When using SVG documents, it’s important to consider accessibility:

Add Alt Text: Add descriptive alt text to SVG images using the alt attribute.
Use Aria Attributes: Use ARIA attributes to provide additional information to screen readers.
Ensure Text is Accessible: Ensure that any text within the SVG document is accessible to screen readers.

By following these guidelines, you can effectively use SVG documents in your web projects, creating scalable, accessible, and interactive graphics.

5. Conclusion

Understanding what an SVG document is, how to create one, and how to use it effectively can significantly enhance your web design and development skills. SVG documents offer numerous advantages over traditional image formats, including scalability, small file sizes, accessibility, and animation capabilities.

5.1. Recap of SVG Benefits

Scalability: SVG documents can be scaled up or down without any loss of quality.
Small File Sizes: SVG files are typically smaller than their raster counterparts, leading to faster loading times.
Accessibility: SVG documents are XML-based and can be made accessible to screen readers and search engines.
Animation Capabilities: SVG documents can be animated using CSS and JavaScript.

5.2. Choosing the Right Tools

Whether you prefer creating SVG documents manually or converting existing images, there are many tools available to help you.

Adobe Illustrator: A professional vector graphics editor.
Inkscape: A free and open-source vector graphics editor.
Online Converters: Tools like Vector Magic, Convertio, and Img2Go can convert raster images to SVG format.

5.3. Integrating SVG Documents into Your Workflow

By incorporating SVG documents into your workflow, you can create more scalable, accessible, and interactive web graphics. Whether you are designing logos, icons, illustrations, or charts, SVG documents can help you achieve your goals.

5.4. Final Thoughts

SVG documents are a powerful tool for web designers and developers. By understanding their capabilities and limitations, you can create stunning visuals that enhance the user experience and improve website performance.

Do you have questions about using SVG files? Contact us at WHAT.EDU.VN, located at 888 Question City Plaza, Seattle, WA 98101, United States. You can also reach us via Whatsapp at +1 (206) 555-7890. We are here to provide free answers and assistance. Ask your questions now and let us help you navigate the world of SVG documents and beyond. Visit WHAT.EDU.VN today to get started!

6. FAQ: SVG Documents

Question	Answer
What exactly is an SVG document, and how does it differ from other image formats like JPEG or PNG?	An SVG (Scalable Vector Graphic) document is an XML-based vector image format. Unlike raster formats like JPEG and PNG that store images as a grid of pixels, SVGs store images as mathematical descriptions of shapes, lines, and curves, allowing them to be scaled without losing quality.
Can SVG documents be animated, and if so, what are the primary methods for animating them?	Yes, SVG documents can be animated using CSS and JavaScript. CSS animations are suitable for simple effects like transitions and hover states, while JavaScript (with libraries like GSAP or Anime.js) is used for more complex and dynamic animations.
What are the main advantages of using SVG documents on a website?	The primary advantages of using SVG documents on a website include scalability without quality loss, smaller file sizes (for simple graphics), accessibility for screen readers and search engines, and the ability to be styled and animated with CSS and JavaScript.
How do I ensure that SVG documents are accessible to users with disabilities?	To ensure SVG accessibility, add descriptive alt text to images, use ARIA attributes to provide additional information to screen readers, and ensure that any text within the SVG is accessible. These practices help provide context and usability for all users, including those with disabilities.
What are some common tools for creating and editing SVG documents?	Common tools for creating and editing SVG documents include Adobe Illustrator (a professional vector graphics editor), Inkscape (a free and open-source editor), and online converters like Vector Magic, Convertio, and Img2Go for converting raster images to SVG format.
How do I embed an SVG document into an HTML page?	You can embed an SVG document into an HTML page using the `<img>` tag, the `<object>` tag, or by embedding the SVG code directly into the HTML (inline SVG). Inline SVG provides the most flexibility for styling and animating the graphic.
What are the best practices for optimizing SVG documents for web performance?	Best practices for optimizing SVG documents include minimizing file size by removing unnecessary elements and metadata, using CSS for styling instead of inline styles, compressing SVG files using tools like SVGO, and using a Content Delivery Network (CDN) to serve files from a server geographically close to users.
Are there any security concerns when using SVG documents, and how can I mitigate them?	Yes, there are security concerns when using SVG documents because they can contain embedded JavaScript that could pose a risk. To mitigate these risks, ensure that SVG files come from trusted sources, sanitize SVG files by removing any JavaScript or potentially harmful code, and validate SVG files before use.
What are some specific use cases where SVG documents are particularly well-suited?	SVG documents are particularly well-suited for logos, icons, illustrations, charts and graphs, maps, and web animations due to their scalability, small file sizes, and ability to be styled and animated.
How do I handle SVG support in WordPress?	WordPress does not natively support SVG uploads due to security concerns. You can enable SVG support by using a plugin like Safe SVG or manually adding code to your theme’s `functions.php` file, ensuring that you sanitize and validate SVG files for security.

Still have questions? Don’t hesitate to ask us at WHAT.EDU.VN. Our team is ready to provide free answers and guidance. Contact us at 888 Question City Plaza, Seattle, WA 98101, United States, or reach out via Whatsapp at +1 (206) 555-7890. Visit what.edu.vn today to get the answers you need!