I need a tool to design SVG for HTML

TLDR: I would recommend Inkscape (although this is just my own personal preference). I don't want to denigrate other capable software such as Adobe Illustrator,Sketch, Affinity Designer, etc.

The "random stuff" isn't random stuff. Let me explain further:

In Inkscape when you save an "Inkscape SVG" it contains Inkscape specific XML. This is Inkscape's own native file format, and you would use this to save your source file so that's it's fully editable in Inkscape when re-opened. This format is not intended for general SVG output. Although in many cases browsers would simply ignore the Inkscape specific XML and render the SVG anyway.

Outputting a clean SVG (without the Inkscape XML) is entirely possible right inside Inkscape, without the need to use other software. Here are two methods:

1. Save your file and choose "Plain SVG" in the file type dropdown. This will remove almost all of the Inkscape specific XML, except the Metadata and possibly some unused IDs and attributes. You could easily manually delete the Metatdata in any text editor, since it's not required for a working SVG. In most cases, this method is the easiest and quickest.

2. For more advanced control, you can also choose "Optimized SVG" in the file type dropdown. This gives much more control over what you can strip out of the SVG. In the options which pop up during the save process, you can remove things such as Metadata, other unnecessary tags, and set the number of significant digits, collapse unnecessary groups, and remove unused IDs, etc. You can also remove other things in the XML editor in Inkscape, such as Transforms, and attributes you don't need.

To copy and paste SVG code, you can open an SVG in any text editor, and simply copy and paste it from there. Obviously, you can also manually edit the code in any text editor.

Here is an example of the kind of output that is possible in Inkscape. This is an Optimized SVG generated by Inkscape. It's just a couple of filled and stroked ellipses.

<?xml version="1.0" encoding="UTF-8"?>
<svg width="70.1mm" height="42.7mm" version="1.1" viewBox="0 0 70.1 42.7" xmlns="http://www.w3.org/2000/svg">
<g fill="#4d4d4d" stroke="#2ca02c" stroke-width="3.4">
<ellipse cx="27.8" cy="19.2" rx="23.4" ry="14.8"/>
<ellipse cx="49.1" cy="30" rx="15.2" ry="9.44"/>
</g>
</svg>

I would strongly recommend SVGOMG.

It's a great (open source) tool and it allows you to really fine tune the level of cleaning up / optimization it performs.

They obviously allow you to easily strip out the unnecessary info, but they also allow you to easily optimize other portions of the SVG.