2

I'm working a lot with Scalable Vector Graphics (SVG) code and need some help. How do I export SVG code to a file? Do I have to use a program outside of my text editor to do this?

7
  • 2
    You just save it. SVG is just a text file (a kind of XML actually), with an svg file extension.
    – Billy Kerr
    Aug 2, 2019 at 10:56
  • @BillyKerr so the opening and closing tags are <svg></svg> ? and then save it as .svg?
    – Daniel
    Aug 2, 2019 at 11:35
  • Yes, that's it. Note: if your text editor doesn't allow you to "save as" SVG, just save it as a regular text file (.txt), and change the file extension to .svg
    – Billy Kerr
    Aug 2, 2019 at 11:50
  • @BillyKerr i just did that but no image shows when i open it...
    – Daniel
    Aug 2, 2019 at 11:54
  • What are you opening it in? Drag the file into your browser. If it's a valid SVG, it should display.
    – Billy Kerr
    Aug 2, 2019 at 11:57

2 Answers 2

2

An SVG file is just a text file (actually an XML file), much like an HTML page. It contains a set of instructions which can be read by software (such as a browser) and displayed or rendered as a graphic on-screen.

All you need to do is save your SVG file as a .svg file. If your text editor doesn't allow you to save as .svg, you can save it as a regular text file (.txt) and change the file extension to .svg

If you want software to open and edit an SVG graphicially, you can use vector image editors, such as Inkscape, or Adobe Illustrator.

-1

I think that there has to be a xmlns attribute in the svg tag to make a working .svg file.

I used xmlns="http://www.w3.org/2000/svg"

and my svg was 200 pixels wide and 120 pixels tall (and I wanted the top-left corner to be (0,0) in the svg's coordinate system.) So I used viewbox="0 0 200 120"

example: the code of a .svg file I made:

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 120">
  <circle cx="25" cy="25" r="20" 
    stroke="red" stroke-width="2" fill="darkred" />
  <rect x="60" y="20" width="100" height="50" 
    stroke="green" stroke-width="2" fill="darkgreen" />
  <polygon points="10,60 80,90 20,100" 
    style="fill: darkblue; stroke: blue; stroke-width: 2" />
</svg>

Also, if there's a style tag, I think it needs to include the xml CDATA stuff.

2
  • You do not need CDATA stuff when using a style tag inside an svg. Also, you don't really need the xmlns info either. Modern browsers know the svg file format enough to make an educated guess. Hell, you don't even need the viewbox, though it's probably a good idea to include it.
    – PieBie
    Dec 21, 2021 at 9:12
  • 1
    There are some cases where an xmlns is necessary but for modern browsers you don't need it. Mar 15, 2022 at 2:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.