2
\$\begingroup\$

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:

enter image description here

            <!-- ^^^ 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:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1"
                 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"
                                    borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2"
                                    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"/>
                      <metadata id="metadata5">
                        <rdf:RDF>
                          <cc:Work rdf:about="">
                            <dc:format>image/svg+xml</dc:format>
                            <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
                            <dc:title/>
                          </cc:Work>
                        </rdf:RDF>
                      </metadata>
              <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"
                       xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/7QA2UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAABkcAmcAFHZX
                                                          ei1vODJ5WVJ0QjJZVmlhNHBkAP/bAEMAAwMDAwMDBAQEBAUFBQUFBwcGBgcHCwgJCAkICxELDAsL
                                                          DAsRDxIPDg8SDxsVExMVGx8aGRofJiIiJjAtMD4+VP/bAEMBAwMDAwMDBAQEBAUFBQUFBwcGBgcH
                                                          CwgJCAkICxELDAsLDAsRDxIPDg8SDxsVExMVGx8aGRofJiIiJjAtMD4+VP/CABEIAAMB4AMBIgAC
                                                          EQEDEQH/xAAaAAEAAwEBAQAAAAAAAAAAAAAAAgQFAwYH/8QAGwEAAgMBAQEAAAAAAAAAAAAABAUC
                                                          AwYAAQj/2gAMAwEAAhADEAAAAfog3Pyq5Hss/GGLjH8wP9NkYBodZnBnrLN0F2FsCsV8pZ2d0X6L
                                                          rAFfc4lhUuhTFSEcogEgFfSkL4ypCX2IS3w6Cvr3UXg2tUUr9beM/nuoBCu+hAVN2QrU2RVTSoB6
                                                          OEQhXKBGP//EAB0QAAIDAQADAQAAAAAAAAAAAAACAQMQIAQwMkL/2gAIAQEAAQUC4cYsLBx9UUjF
                                                          xDx/mO59E91ilYu1lZHE6x+D/8QAGhEAAgMBAQAAAAAAAAAAAAAAAAQCAxAFIP/aAAgBAwEBPwEi
                                                          KiAkc4UxYUKdp8U7IZG8d18qLj//xAAaEQADAAMBAAAAAAAAAAAAAAAABBABAgMy/9oACAECAQE/
                                                          ATAuKCs2rZrOgzGPUfjEbGYzeN//xAAUEAEAAAAAAAAAAAAAAAAAAABQ/9oACAEBAAY/AnP/xAAa
                                                          EAADAQEBAQAAAAAAAAAAAAAAATEQIEFR/9oACAEBAAE/IeI3p5s+nuILFdXoeOCzwvlY+SFD3gzt
                                                          EcrxkCx//9oADAMBAAIAAwAAABAMGJ0PzwIByB6GD7z4EP15yEPz/wAceA//xAAZEQACAwEAAAAA
                                                          AAAAAAAAAAAgQQABEDH/2gAIAQMBAT8QDIEsSKW9XO8dDbT/xAAbEQACAgMBAAAAAAAAAAAAAAAQ
                                                          QQAgATAxgf/aAAgBAgEBPxAOInk5D2Hq20RkKf/EABYQAAMAAAAAAAAAAAAAAAAAAAEQUP/aAAgB
                                                          AQABPxBmzbMFT8cxDYf/2Q== "
                        style="image-rendering:optimizeQuality" preserveAspectRatio="none" decoding="async"/>
              </g>
            </svg>

enter image description here

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?

\$\endgroup\$
1
\$\begingroup\$

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"/>
</linearGradient>
<rect width="100%" height="20" fill="url(#grd_0d)"></rect>
</svg>
\$\endgroup\$
2
  • \$\begingroup\$ Thanks, this is alot more streamline than my example... \$\endgroup\$ – Ryan Stone Dec 13 '20 at 15:20
  • 1
    \$\begingroup\$ base64 takes up to much space & inkscape exports loads of junk code with it.. \$\endgroup\$ – Ryan Stone Dec 13 '20 at 15:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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