August 17, 2024
Since a lot of the elements on the LIT website are taken directly from the old website before dark mode, many of them must be updated to have good contrast or be even visible in dark mode.
We can use Tailwind’s dark:fill-white to style the SVGs, but for this to work they must be added inline to the page, not via an img tag:
Before:
<img class="sm:w-1/3" src="https://mitit.org/static/new/logo.svg" alt="" />
After:
<svg xmlns="http://www.w3.org/2000/svg" class="sm:w-1/3 dark:fill-white" viewBox="0 0 214.29 114.411">
<path
d="M279.2 86.238c-15.91 4.39-30.333 11.578-42.528 22.832-9.574 8.832-17.305 18.942-19.984 32.02-3.336 16.262 1.43 29.969 14.285 40.465 10.062 8.218 21.941 12 34.851 13.078 25.387 2.117 47.946-4.985 67.754-20.711 9.64-7.652 17.594-16.684 19.676-29.563.332-2.054 1.297-4.21 2.574-5.847.914-1.168 3.121-2.426 4.254-2.067 1.813.57 2.23 2.676 1.309 4.664-.489 1.047-.653 2.293-1.293 3.22-5.973 8.57-11.207 17.835-18.215 25.46-12.832 13.957-29.473 21.84-47.942 25.727-17.601 3.703-35.011 3.308-51.722-4.032-14.992-6.582-25.555-17.23-28.61-33.91-2.332-12.758 1.125-24.41 8.028-35.058 9.847-15.196 23.953-25.196 40.527-31.86 5.445-2.191 11.176-3.683 16.777-5.492l.258 1.074"
transform="translate(-212.884 -83.399)"
/>
...
</svg>
If we save LMT’s logo as an SVG, we find that it contains a lot of unnecessary metadata tags:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="214.28964pt"
height="114.41148pt"
viewBox="0 0 214.28964 114.41148"
version="1.1"
id="svg47"
sodipodi:docname="lmtlogo.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)">
<metadata
id="metadata53">
<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></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs51" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1017"
id="namedview49"
showgrid="false"
inkscape:zoom="0.22348485"
inkscape:cx="124.15416"
inkscape:cy="-264.25282"
inkscape:window-x="1912"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg47" />
...
I had run into this problem before with SVGs exported from Inkscape, and only today did I find the SVGOMG tool from this StackExchange question.
After pasting the SVG markup into the tool:
<svg xmlns="http://www.w3.org/2000/svg" class="sm:w-1/3 dark:fill-white" viewBox="0 0 214.29 114.411">
<path
d="M279.2 86.238c-15.91 4.39-30.333 11.578-42.528 22.832-9.574 8.832-17.305 18.942-19.984 32.02-3.336 16.262 1.43 29.969 14.285 40.465 10.062 8.218 21.941 12 34.851 13.078 25.387 2.117 47.946-4.985 67.754-20.711 9.64-7.652 17.594-16.684 19.676-29.563.332-2.054 1.297-4.21 2.574-5.847.914-1.168 3.121-2.426 4.254-2.067 1.813.57 2.23 2.676 1.309 4.664-.489 1.047-.653 2.293-1.293 3.22-5.973 8.57-11.207 17.835-18.215 25.46-12.832 13.957-29.473 21.84-47.942 25.727-17.601 3.703-35.011 3.308-51.722-4.032-14.992-6.582-25.555-17.23-28.61-33.91-2.332-12.758 1.125-24.41 8.028-35.058 9.847-15.196 23.953-25.196 40.527-31.86 5.445-2.191 11.176-3.683 16.777-5.492l.258 1.074"
transform="translate(-212.884 -83.399)"
/>
...
</svg>
We also have to remove the appropriate styles from the path tags within the SVG, because they will override the classes applied to the svg element. This took a bit of trial and error, because some fill:none styles had to remain to prevent a background from appearing in certain parts of the image. I removed all fill:#000000; from the style attributes.
