We want a Responsive SVG Square as our Logo that we can inline in any HTML element. It should:

Change the fill color using the class Square.
Be responsive. Resize itself based on the size of the containing HTML element.

Approach

Open Inkscape and set the document size to 200X200 pixels.

Create a square and set the dimensions to 200X200 pixels and Xand Yto [0,0].

Make the color of the square black. Save it as an Optimized SVG file. This is the end result:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="200" height="200" version="1.1" viewBox="0 0 52.917 52.917" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
 <metadata>
  <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 transform="translate(0 -244.08)">
  <rect y="244.08" width="52.917" height="52.917" style="fill-opacity:.82838;fill:#000000"/>
 </g>
</svg>

Make the following changes to the svg source:

Remove the <metadata> container element.
Remove the width and height attributes on the svg element
Put the class="Square" attribute on the svg element.
Remove any style attributes inside the svg source. This will override any custom colors we add via CSS. In this case we need to remove:

style="fill-opacity:.82838;fill:#000000"

Then end result should look like this:

<svg class="Square" version="1.1" viewBox="0 0 52.917 52.917" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
 <g transform="translate(0 -244.08)">
  <rect y="244.08" width="52.917" height="52.917"/>
 </g>
</svg>

Now we can set the fill color to orange using the CSS class:

.Square {
   fill: orange;
}

Try it out on codepen.

If you change size of the containing div element to 400X400 pixels the square will be twice the size it is now.

If you cut out a piece of the the square so that it allows the background color of the containing html element to “Shine Through”, thus the color of the cutout can be controlled by the background color of the html element. Here’s a demo of the SuperflyCSS Logo.

Responsive CSS Alterable SVG Logo | Task

Scenario

Approach