SVG Notes
So I added the Hugo logo to the footer and also to a page. First thing is I needed two copies: a shortcode version to put in the content section and a partial for the footer (which is itself another partial).
You can target the SVG with CSS but the sizing is a little odd. I added an id attribute to the svg itself so I could target that:
1svg#hugo {
2 width: 4rem;
3 height: 1rem;
4}
SVG’s have a viewbox AND a viewport. The CSS controls the size of the latter which is a window crops the image.
The viewBox was set in this svg logo with viewBox="0 0 1493 391". The first two numbers are the starting coordinates of the viewbox. The second two are the width and height.
The size of an image comes from the relationship between the viewport and viewbox. If the viewbox size is lowered it has the effect of zooming in.
The viewport is the size of the viewable area.
The viewbox controls what is inside that viewable area.