In this article, I will show you how to format your XML files in a few clicks. I will also show you how to check that the syntax of the XML files is in the right order and all tags are closed.

How to Format XML Files in Notepad++

You can see that the XML file below is not well formatted at all. With the file, I'll demonstrate how to format any XML file in Notepad++:

Step 1: Open your XML file with Notepad++ if you don't have it opened already:

Step 2: In the menu bar, click on "Plugins" and select "Plugins Admin":

Step 3: Search for "xml tools", checkmark it in the search results, click install, and select "Yes":

The plugin will be downloaded and Notepad++ will restart:

Step 4: Click "Plugins" again in the menu bar, hover on "XML Tools", and click "Pretty print" to format the XML file:

Now, the XML file is well formatted:

Alternatively, you can press CTRL + ALT + SHIFT + B to do the same thing.

How to Check XML Syntax with Notepad++

If your XML file is really large, the syntax might be bad, and some tags might be missing closing tags.

You can check the syntax with the same XML Tools plugin and it will suggest what you have to do if it finds that anything is wrong.

Again, click "Plugins", hover on "XML Tools" and select "Check XML syntax now":

Now, it's showing me I didn’t close one of the tags:

Conclusion

This article showed you how to format your XML files inside Notepad++ with the XML Tools plugin. As already stated, this can be useful if you have to work with large XML files inside Notepad++.

The XML Tools plugin is a great tool for working with XML files in Notepad++ as it gives you a good user experience with XML files. For more information, you can hover on it and see a couple of other useful things you can do with it.

Keep coding.

An XML file contains tags that specify how the document should be structured and how it should be stored and transmitted over the internet.

It is no longer the preferred method for organizing and transmitting data, but many legacy systems still use it. Also, both RSS and SVG are based on the XML format.

This is how XML appears:

<?xml version="1.0" encoding="UTF-8"?>
<catalog>
   <book id="bk1">
      <author>Corets, Eva</author>
      <title>Maeve Ascendant</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
   </book>
   <book id="bk2">
      <author>Corets, Eva</author>
      <title>Oberon's Legacy</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
   </book>
   <book id="bk3">
      <author>Corets, Eva</author>
      <title>The Sundered Grail</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
   </book>
</catalog>

In this article, you will learn the various ways you can open an XML file, either on your computer or online.

How to Open an XML File Using a Text Editor

You must have an XML file you are trying to open, either to view only or to view and edit.

If you want to open an XML file and edit it, you can use a text editor. You can use default text editors, which come with your computer, like Notepad on Windows or TextEdit on Mac.

All you have to do is locate the XML file, right-click the XML file, and select the "Open With" option. This will display a list of programs to open the file.

Select Notepad if it is a Windows computer or TextEdit if it is a Mac computer, as shown in the image above. These two are pre-installed text editors for each operating system and should already be on the list. Any basic text editor will work.

You can use other text editors like VSCode (which is suggested on the image above), Atom, Sublime Text and others. But it is always best to use default editors for basic tasks like this, as text editors like VSCode, Atom, and Sublime Text are pretty heavy programs.

How to Open an XML File Using a Browser

If you only want to view the file, you can use any web browser such as Safari, Chrome, and lots more with similar procedures.

The first step is to locate the XML file you want to open, right-click the file, and select the “open with” option. A list of options will appear, including some browsers.

Click on your preferred browser, and then your XML will load up.

Another option would be to open your browser and then drag the XML file to the browser. This also works for text editors.

How to Open an XML File Online

On the internet, dozens of XML viewers and even converters help convert XML files to other formats like JSON. Here are some of the most popular online XML viewers/editors:

• Code Beautify

• JSON Formatter

• Tutorialspoint

• JSON Formatter

• Google Chrome Extension

Each one works similarly, allowing you to upload the XML file from your computer.

Chrome has an XML Viewer extension, which works like all these online XML viewers. All you have to do is download the extension. Then click on it whenever you want to open an XML file.

Once you click on it, an interface that is easy to navigate will appear with two major options you can use to upload your XML file: From your PC or From your Google Drive.

When you select an option, you can search for the file, and within a few milliseconds, your XML file will open in the plain section.

Ta-da 😂

In this short article, you have learned how to open an XML file. I hope this will help you.

Have fun coding!

SVG stands for Scalable Vector Graphics. It is a unique type of image format for vector-based graphics written in Extensible Markup Language (XML).

In this tutorial, I will explain why you'd want to use SVG images and how you can use them in CSS and HTML.

Why Should You Use SVG Images?

There are a number of reasons to use SVG images, some of which are:

• SVG images do not lose their quality when zoomed or resized.

• They can be created and edited with an IDE or text editor.

• They are accessible and animatable.

• They have a small file size and are highly scalable.

• And they can be searched, indexed, scripted, and compressed.

Now let's see how you can actually work with SVG images.

How to Download the SVG Image Used in This Tutorial

If you want to work with the SVG image I've used in this tutorial, follow the steps (and diagram) below to download it.

• Go to unDraw.

• Change the background color to yellow.

• In the search box, search for the word happy.

• Click on the image named Happy news.

• On the pop-up window, click on the Download SVG to your projects button.

If you followed the steps above correctly, the SVG image should be on your computer now.

Now, open the SVG image in your favorite IDE or text editor. Rename it to happy.svg or whatever name you prefer.

How to Use SVG Images in CSS and HTML

There are several different ways to use SVG images in CSS and HTML. We will explore six different methods in this tutorial.

1. How to use an SVG as an <img>

This method is the simplest way to add SVG images to a webpage. To use this method, add the <img> element to your HTML document and reference it in the src attribute, like this:

<img src = "happy.svg" alt="My Happy SVG"/>

Assuming you downloaded the SVG image from unDraw and renamed it to happy.svg, you can go ahead and add the code snippet above into your HTML document.

If you did everything correctly, your webpage should look exactly like the demo below. 👀

When you add an SVG image using the <img> tag without specifying the size, it assumes the size of the original SVG file.

For instance, in the demo above, I didn't modify the size of the SVG image, so it assumed its original size (which was a width of 915.11162px and a height of 600.53015px ).

Note: to change the original size, you have to specify the width and height with CSS as you can see in the demo below. You can also update the original width and height directly.

Even though we can change the size of SVG images added via the <img> tag, there are still some restrictions if you want to make major style changes to the SVG image.

2. How to use SVG as a CSS background-image

This is similar to adding SVG to an HTML document using the <img> tag. But this time we do it with CSS instead of HTML as you can see in the code snippet below.

body {
  background-image: url(happy.svg);
}

When you use an SVG as a CSS background image, it has similar limitations to using <img>. Still, it allows a bit more customization.

Check out the demo below and feel free to make modifications to it using CSS.

3. How to use inline SVG images

SVG images can be written directly into the HTML document using the<svg> </svg> tag.

To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document.

<body>
 // Paste the SVG code here.
</body>

If you did everything correctly, your webpage should look exactly like the demo below.

When you use SVG inline in the HTML document, it reduces load time because it serves as an HTTP request.

Using this method lets you perform more customization as opposed to using either the <img> or background-image methods.

4. How to use an SVG as an <object>

You can also use an HTML <object> element to add SVG images to a webpage using the code syntax below:

<object data="happy.svg" width="300" height="300"> </object>

You use the data attribute to specify the URL of the resource that you'll use by the object, which is the SVG image in our case.

You use the width and height to specify the size of the SVG image.

Again, below is a demo for you to explore. 😃

Using the <object> is supported across all browsers that support SVG.

5. How to use SVG as an <iframe>

Even though this isn't advisable, you can also add an SVG image using an <iframe> as seen in the demo below.

Just keep in mind, though, that <iframe>s can be difficult to maintain and will be bad for your site's Search Engine Optimization (SEO).

Using <iframe> also defeats the purpose of the Scalable in the name Scalable Vector Graphics because SVG images added with this format are not scalable.

6. How to use SVG as an <embed>

The HTML <embed> element is another way to use an SVG image in HTML and CSS using this syntax: <embed src="happy.svg" />.

Keep in mind, however, that this method has limitations, too. According to MDN, most modern browsers have deprecated and removed support for browser plug-ins. This means that relying upon <embed> is generally not wise if you want your site to be operable on the average user's browser.

Below is a demo of using the HTML <embed> element to add an SVG image.

Conclusion

I hope you were able to learn about the different ways of using SVG images in CSS and HTML. This will hopefully guide you towards choosing the right method when adding SVG images to a website.

If you have any questions, you can send me a message on Twitter, and I'll be happy to answer every single one.

Keep reading to learn what and XML file is, and how to open it both locally on your computer and in online editors.

What's an XML file?

XML stands for Extensible Markup Language and was created by the W3C (World Wide Web Consortium) in the 90s.

Though XML, like HTML, is a human readable markup language, they serve very different purposes. HTML describes the structure of a web page and its content, and XML describes the structure of data.

XML provides programs, and more importantly, programmers, a standard, widely accepted format to transmit data across different systems. In that way, XML has more in common with JSON than it does with HTML.

While XML is no longer the preferred method for organizing and transmitting data, it still has its place. XML is still used in many legacy systems, and both RSS and SVG are both based on the XML format.

Here's a simple example of an XML file and how it's used to structure data:

<?xml version="1.0" encoding="UTF-8"?>
<fcc_merch>
   <item>
      <name>Triblend T-shirt</name>
      <price>$24.99</price>
      <description>Represent the freeCodeCamp community with pride in this jet-black Triblend T-shirt featuring the iconic "bonfire function call" logo.</description>
   </item>
   <item>
      <name>Cotton-Poly Pullover Hoodie</name>
      <price>$49.99</price>
      <description>Stay toasty and dress like a developer with this jet-black cotton-poly pullover hoodie.</description>
   </item>
   <item>
      <name>Ceramic Coffee Mug</name>
      <price>$14.99</price>
      <description>Toast to the developer community with your very own freeCodeCamp Bonfire Function Call mug.</description>
   </item>
</fcc_merch>

How to open an XML file locally

Back to your downloads folder and that file with the .xml extension.

If you ever need to open an XML file, you have a lot of options. The big question is whether you need to edit the data in the XML file, or just view it.

View an XML file in a browser

If all you need to do is view the data in an XML file, you're in luck. Just about every browser can open an XML file.

In Chrome, just open a new tab and drag the XML file over. Alternatively, right click on the XML file and hover over "Open with" then click "Chrome".

When you do, the file will open in a new tab.

Here's what the fcc-merch.xml file looks like in Chrome:

Note: Instructions for your operating system may differ slightly.

Edit an XML file in a text editor

If you need to edit an XML file locally, or you prefer to view it outside of the browser, the best way to do that is in a text editor.

You have a lot of options depending on your operating system. Here are some common recommendations:

Windows:

• Notepad++

Mac/Linux/Windows:

• VSCode
• Atom
• Sublime Text

Note that VSCode, Atom, and Sublime Text are pretty heavy programs, especially if all you want to do is edit an XML file. Mac and Linux users may have access to other lightweight text editors like gedit or Leafpad that can open and edit XML files.

If you want to learn how to code, then by all means, try out one of the editors listed above.

Once you've download an editor, you can open the XML file from the editor's GUI like you would any other file.

Here's the same fcc-merch.xml file in VSCode:

How to open an XML file online

Opening an XML file online is easy, and the best online XML viewers also function as editors and formatters.

Here are some of the most popular online XML viewers/editors:

• Code Beautify
• JSON Formatter
• Tutorialspoint

Each one works similarly, allowing you to either upload the XML file from your computer or copy and paste it into the editor on the left:

Code Beautify's XML viewer/editor

Once you load your XML, you can click "Tree View" to make it easier to see the hierarchy of your data and how different fields are nested:

Just make any edits you need to in the editor on the left. Then when you're done, just click "Download" to download a copy of your edited file.

Note that your downloaded copy may have a different name like codebeautify.xml. Just rename the file before you attach it to an email, upload it, or whatever it is you need to do.

In summary

The XML format has a long and storied history.

Even though XML files are quite dense compared to modern solutions for data transmission like JSON, it doesn't hurt to know how to open and edit them. Fortunately you've got a lot of options on your local machine and online.

Hope this helps the next time you need to open up or edit an XML file.

Stay safe and happy coding.

XML was designed to simplify data sharing and data transport, and focuses on structuring that information in a logical way.

Syntax of XML

The syntax for XML is very straight forward and quite easy to learn.

XML documents must contain one root element that is the parent of all other elements:

<root>
  <child>
    <subchild>.....</subchild>
  </child>
</root>

Above syntax shows the root element which is necessary while creating an XML code.

But the root element can be called anything. For example:

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

In the code above <note> is the root element.

Advantages of using XML:

• Simplicity - XML documents are ordinary text files that can be created and edited with any text editor.
• Vendor independence
• Platform independence
• Extensive infrastructure

Disadvantages of using XML:

• Verbose and cumbersome syntax
• Highly inefficient storage