Question 45019 in Html Question posted in
Some basic documentation can be found here.

How to display SVG Markup in Browser – Large File Size (40MB) – Html

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?

Tags:

2

Answers


  1. 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 🙂

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search