I've created a navigation spacer bar that has a hue background. To separate different aspects of content it was imported to Inkscape then exported as an SVG. It uses base64 image which I’m not sure is the optimal way to achieve including the image within SVG. The code is below.

This is the result:

            <!-- ^^^ Remaking the below Svg -->
<svg id="svg8" viewBox="0 0 208.51721 1.5955585" version="1.1"
width="208.51721mm" height="1.5955585mm" xmlns="http://www.w3.org/2000/svg"
sodipodi:docname="hue_space_bar.svg" xmlns:svg="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
xmlns:cc="http://creativecommons.org/ns#">
<defs id="defs2"/>
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666"
inkscape:zoom="0.98994949" inkscape:cx="396.84993" inkscape:cy="45.208726"
inkscape:document-units="mm" inkscape:current-layer="layer1" showgrid="false"
inkscape:window-width="1288" inkscape:window-height="754" inkscape:window-x="156"
inkscape:window-y="156" inkscape:window-maximized="0"/>
<rdf:RDF>
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
<g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(-0.41000891,-0.47546211)">
<image id="image3721" width="208.51721" height="1.5955585" x="0.41000891" y="0.47546211"
ei1vODJ5WVJ0QjJZVmlhNHBkAP/bAEMAAwMDAwMDBAQEBAUFBQUFBwcGBgcHCwgJCAkICxELDAsL
DAsRDxIPDg8SDxsVExMVGx8aGRofJiIiJjAtMD4+VP/bAEMBAwMDAwMDBAQEBAUFBQUFBwcGBgcH
CwgJCAkICxELDAsLDAsRDxIPDg8SDxsVExMVGx8aGRofJiIiJjAtMD4+VP/CABEIAAMB4AMBIgAC
EQEDEQH/xAAaAAEAAwEBAQAAAAAAAAAAAAAAAgQFAwYH/8QAGwEAAgMBAQEAAAAAAAAAAAAABAUC
rAFfc4lhUuhTFSEcogEgFfSkL4ypCX2IS3w6Cvr3UXg2tUUr9beM/nuoBCu+hAVN2QrU2RVTSoB6
xDx/mO59E91ilYu1lZHE6x+D/8QAGhEAAgMBAQAAAAAAAAAAAAAAAAQCAxAFIP/aAAgBAwEBPwEi
ATAuKCs2rZrOgzGPUfjEbGYzeN//xAAUEAEAAAAAAAAAAAAAAAAAAABQ/9oACAEBAAY/AnP/xAAa
AAAAAAAAAAAgQQABEDH/2gAIAQMBAT8QDIEsSKW9XO8dDbT/xAAbEQACAgMBAAAAAAAAAAAAAAAQ
QQAgATAxgf/aAAgBAgEBPxAOInk5D2Hq20RkKf/EABYQAAMAAAAAAAAAAAAAAAAAAAEQUP/aAAgB
AQABPxBmzbMFT8cxDYf/2Q== "
style="image-rendering:optimizeQuality" preserveAspectRatio="none" decoding="async"/>
</g>
</svg>


I’m sure a lot of these tags and meta data are useless, especially pagecolor="#ffffff" bordercolor="#666666". I’m wondering which parts can safely be removed without breaking the image. Is there a better way to achieve this? How could this be streamlined as much as possible, so the end result is as little code as possible?

Would I be better off using the eyedropper tool, selecting the main colors, then creating a basic SVG with defs and a gradient?

For a simpler svg code, you can if you want to study this example that I created for you! It takes up your example of a bar with a straightforward linear gradient. As you can see you can change the colors as you like, the size of your bar (rect)! You can also choose to make your bar responsive in width or not by placing a fixed size in px or percentage! In short, this example gives you a lot of possibilities.

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 256 256"
enable-background="new 0 0 256 256" xml:space="preserve">
<linearGradient id="grd_0d" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0" style="stop-color:#FF0000"/>
<stop offset="0.1" style="stop-color:#FFC000"/>
<stop offset="0.2" style="stop-color:#FFFB00"/>
<stop offset="0.3" style="stop-color:#15FF00"/>
<stop offset="0.5" style="stop-color:#0000FF"/>
<stop offset="0.6" style="stop-color:#0015FF"/>
<stop offset="0.8" style="stop-color:#E600Ff"/>
<stop offset="1" style="stop-color:#FF0000"/>