CODEWITHSUNDEEP
csssvgscale
unor
unor

Reputation: 96727

Add SVG (via CSS) that adjusts to element's font-size

I want to add an SVG via CSS, without any changes to the HTML.

tl;dr: The image should act like text.

The image should always have the height of the element (or even better, the text content) it gets added to, and the width according to its aspect ratio. The height/font-size/font-family of the element is not fixed (height is not specified, i.e., auto; font-size is specified in the em unit, and it can’t be relied on a specific default browser font-size; it should not depend on characteristics of a specific font).

The image should be added to the left of a heading (visually inside the heading’s box), and between the image and the heading content there should always be a spacing of 0.5em.

Ideally it would work no matter what is specified in the SVG file (i.e., width/height on its svg element), but I’m fine with editing the SVG.

Is this possible?

I tried adding it as background-image (but how to get a spacing if the image width is unknown?), as pseudo-element within content (but how to adjust the width/height?), and as pseudo-element within background-image (but how to vertically align it with the text, and how to make it appear without specifying only height in em or similar?).

I’m open to any solution that the newest browser versions support.

Example SVG

h1 {font-size:1.5em;}

.foo {
  background-image:url("noun_39107.svg");
  background-repeat:no-repeat;
  background-size:contain;
  /* … but how to get a spacing of 0.5em, no matter the size? */
}

.bar::before {
  content:url("noun_39107.svg");
  margin-right:0.5em;
  /* … but how to scale it? */
}

.qux::before {
  content:" ";
  margin-right:0.5em;
  background-image:url("noun_39107.svg");
  background-repeat:no-repeat;
  background-size:contain;
  display:inline-block;
  height:1em; width:1em; /* … I don’t know the actual height/width */
  vertical-align:middle;
  /* … but how to align it vertically so that it’s like text? */
}
<h1 class="foo">Foo</h1>

<h1 class="bar">Bar</h1>

<h1 class="qux">Qux</h1>

Upvotes: 1

Views: 588

Answers (1)

meuwka
meuwka

Reputation: 139

Look at this

h1 {font-size:1.5em;}
h1.lg {font-size:4em;}

.qux::before {
  content:" ";
  margin-right:0.5em;
  background-image: url('data:image/svg+xml;dataset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M95.71 50c0-1.218-6.9-.794-7.502-1.92-.575-1.112 5.03-4.672 4.723-5.8-.313-1.137-6.96-1.37-7.015-2.612-.048-1.256 6.304-4.104 5.777-5.178-.52-1.078-6.77 2.04-7.7 1.19-.932-.852 3.312-5.886 2.73-6.902s-7.084.168-7.345-1.064c-.273-1.24 5.538-5.106 4.867-6.09-.685-.988-6.305 3.088-7.365 2.42-1.063-.663 2.072-6.522 1.252-7.364-.815-.85-6.73 2.2-7.393 1.146-.687-1.074 3.154-6.82 2.106-7.427-1.047-.606-4.113 5.585-5.387 5.54-1.24-.048-1.562-6.694-2.704-6.985-1.137-.28-4.635 5.363-5.743 4.774-1.11-.586-.377-7.493-1.58-7.585-1.172-.09-1.638 6.883-2.842 7.263-1.197.38-3.413-5.843-4.606-5.843-1.184 0-3.407 6.223-4.593 5.843-1.21-.38-1.66-7.352-2.838-7.263-1.2.092-.486 7-1.59 7.584-1.115.588-4.606-5.056-5.74-4.772-1.154.29-1.47 6.937-2.704 6.985-1.284.044-4.342-6.147-5.39-5.54-1.042.604 2.792 6.354 2.105 7.43-.664 1.053-6.57-2-7.38-1.154-.822.84 2.312 6.7 1.254 7.364-1.06.667-6.685-3.41-7.36-2.42-.683.982 5.127 4.85 4.86 6.09-.268 1.23-6.758.043-7.347 1.063-.585 1.013 3.66 6.054 2.72 6.906-.932.846-7.174-2.266-7.694-1.19-.52 1.078 5.827 3.915 5.777 5.174-.04 1.243-6.688 1.468-7.004 2.608-.317 1.13 5.29 4.696 4.713 5.808-.586 1.12-7.482.7-7.482 1.917 0 1.222 6.904.794 7.486 1.916.577 1.113-5.03 4.676-4.714 5.805.317 1.142 6.957 1.377 7.004 2.606.042 1.27-6.303 4.11-5.78 5.178.523 1.082 6.762-2.033 7.695-1.188.94.855-3.306 5.89-2.722 6.906.59 1.023 7.077-.168 7.35 1.068.27 1.238-5.54 5.103-4.862 6.085.676.996 6.3-3.08 7.36-2.417 1.064.664-2.075 6.52-1.252 7.362.827.853 6.725-2.204 7.39-1.157.687 1.075-3.148 6.832-2.103 7.43 1.05.606 4.115-5.595 5.39-5.54 1.24.048 1.56 6.7 2.71 6.985 1.134.294 4.628-5.35 5.737-4.76 1.102.574.38 7.487 1.586 7.576 1.17.086 1.63-6.875 2.842-7.26 1.193-.38 3.413 5.847 4.6 5.847 1.186 0 3.403-6.23 4.602-5.845 1.204.384 1.656 7.34 2.84 7.26 1.205-.097.486-7.007 1.59-7.585 1.107-.592 4.605 5.048 5.735 4.764 1.15-.294 1.465-6.934 2.703-6.98 1.287-.042 4.347 6.145 5.394 5.54 1.04-.593-2.793-6.355-2.115-7.43.67-1.048 6.57 2.01 7.398 1.156.814-.84-2.313-6.698-1.26-7.362 1.062-.663 6.682 3.413 7.366 2.424.67-.982-5.135-4.854-4.868-6.092.274-1.236 6.77-.052 7.358-1.07.575-1.018-3.67-6.05-2.725-6.904.924-.84 7.16 2.283 7.68 1.194.527-1.078-5.824-3.915-5.77-5.185.04-1.232 6.694-1.465 7.016-2.605.31-1.13-5.297-4.682-4.722-5.8.583-1.115 7.482-.698 7.482-1.92zm-59.437 1.48c-5.137 0-9.3-4.166-9.3-9.3 0-5.137 4.163-9.302 9.3-9.302 5.138 0 9.3 4.165 9.3 9.302 0 5.133-4.162 9.3-9.3 9.3zm27.053 0c-5.133 0-9.295-4.166-9.295-9.3 0-5.137 4.163-9.302 9.296-9.302 5.14 0 9.303 4.165 9.303 9.302 0 5.133-4.163 9.3-9.304 9.3zM36.273 38.675c-1.932 0-3.5 1.57-3.5 3.505 0 1.93 1.568 3.5 3.5 3.5 1.934 0 3.503-1.57 3.503-3.5 0-1.934-1.57-3.505-3.503-3.505zM63.326 38.675c-1.93 0-3.497 1.57-3.497 3.505 0 1.93 1.566 3.5 3.496 3.5 1.938 0 3.505-1.57 3.505-3.5 0-1.934-1.566-3.505-3.504-3.505z"/></svg>');
  background-repeat:no-repeat;
  display:inline-block;
  vertical-align:middle;
  height:1em;
  width:1em;
}
<h1 class="qux">Qux</h1>
<h1 class="qux lg">Qux</h1>

Upvotes: 1

Related Questions