我想通过CSS添加SVG，而不对HTML进行任何更改。
tl; dr：图片应该像文字一样。
图像应始终具有添加到的元素的高度（甚至更好，文本内容），以及根据宽高比的宽度。元素的height / font-size / font-family不是固定的（height未指定，即auto; font-size单位中指定了em，并且它不能依赖于特定的默认浏览器字体大小;它不应该依赖于特定字体的特征。）
图像应添加到标题的左侧（视觉上位于标题框内），图像和标题内容之间的距离应始终为0.5em。
理想情况下，无论SVG文件中指定了什么（即width / height元素svg / background-image，它都可以正常工作，但我可以编辑SVG。
这可能吗？
我尝试将其添加为content（但如果图像宽度未知，如何获取间距？），作为background-image中的伪元素（但如何调整宽度/高度？） ，以及em中的伪元素（但如何将其与文本垂直对齐，以及如何在不指定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>{{1}}
答案 0 :(得分：0)
看看这个
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>