1

Screenshot of browser console log showing SVG markup

Above is SVG markup (vector graphics) printed in console. I want to display this graphics. However, when I try to copy and paste it in a new HTML viewer, the graphics does not show perfectly.

I have tried online editors (HTML formatters) but they crash every time because the file is too big (35.5MB).

Can anyone suggest me what is missing in the markup so it can be displayed in a browser or other viewers?

Martin Lisowski
  • 490
  • 1
  • 3
  • 10
Theodore John
  • 117
  • 6
  • 1
    It looks like a SVG instead of HTML. Are you sure it's a HTML file? – Raptor Feb 22 '23 at 09:05
  • @Raptor, Yes its an SVG file , HTML file can also run it right? – Theodore John Feb 22 '23 at 10:30
  • Indeed, looks like SVG markup. Try to put the code inside an tag like shown on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg – Martin Lisowski Feb 22 '23 at 11:18
  • Does this answer your question? [How To Auto-Format / Indent XML/HTML in Notepad++](https://stackoverflow.com/questions/7117949/how-to-auto-format-indent-xml-html-in-notepad) – Nitin Sawant Feb 22 '23 at 11:36
  • I'm afraid some browsers/applications might also crash trying to render such a huge file. If you're dynamically generating this svg you should consider to reduce the output first: number of elements, floating point accuracy, remove unnecessary attributes (e.g fill-rule) etc. – herrstrietzel Feb 22 '23 at 19:09

2 Answers2

3

First, if you are on Windows use Notepad++ it can handle very large files. https://notepad-plus-plus.org/

What you have is SVG markup but in order to display it you need to put it inside an <SVG> element, see: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg

Make a new empty file and enter the following code and paste the code from the console to the indicated place:

<svg viewBox="0 0 1000 1000"
  xmlns="http://www.w3.org/2000/svg">
PASTE THE CODE HERE
</svg>

Save the file as pic.svg and open it in your browser (for example Chrome and MS Edge can display SVG files directly).

You will have to adapt the viewbox coordinates to the actual size of the image. The code above assumes that the picture coords go from (0,0) to (1000,1000) - but your picture might be smaller or larger.

Martin Lisowski
  • 490
  • 1
  • 3
  • 10
0

I'm just guessing that it might be simpler and smaller to put all of them in one file using stuff like style and script tags, but it's ok if i'm wrong tho :)

Liam Snapp
  • 11
  • 2