tengo la siguiente imagen en svg:
<svg width="17" height="16" viewBox="0 0 17 16" xmlns="http://www.w3.org/2000/svg">
<path d="M7.75028 5.30723C7.58872 5.49072 7.50001 5.74463 7.50001 6C7.50001 6.27614 7.27615 6.5 7.00001 6.5C6.72387 6.5 6.50001 6.27614 6.50001 6C6.50001 5.52689 6.6613 5.0308 6.99974 4.64641C7.34684 4.25219 7.8597 4 8.50001 4C9.14033 4 9.65318 4.25219 10.0003 4.64641C10.3387 5.0308 10.5 5.52689 10.5 6C10.5 6.48947 10.3839 6.86964 10.1976 7.18921C10.0347 7.46855 9.82252 7.68963 9.65279 7.86652L9.61154 7.90956C9.42473 8.1051 9.28214 8.26391 9.17734 8.46406C9.07734 8.65505 9.00001 8.90847 9.00001 9.29292C9.00001 9.56906 8.77615 9.79292 8.50001 9.79292C8.22387 9.79292 8.00001 9.56906 8.00001 9.29292C8.00001 8.76109 8.11018 8.3464 8.29143 8.00022C8.46788 7.66319 8.70029 7.41576 8.88848 7.21878L8.91064 7.19559C9.09847 6.99908 9.23276 6.85858 9.33371 6.68547C9.42861 6.52273 9.50001 6.31707 9.50001 6C9.50001 5.74463 9.4113 5.49072 9.24974 5.30723C9.09684 5.13358 8.8597 5 8.50001 5C8.14033 5 7.90318 5.13358 7.75028 5.30723ZM8.49991 12.2122C8.88628 12.2122 9.19951 11.899 9.19951 11.5126C9.19951 11.1262 8.88628 10.813 8.49991 10.813C8.11353 10.813 7.8003 11.1262 7.8003 11.5126C7.8003 11.899 8.11353 12.2122 8.49991 12.2122ZM0.500011 8C0.500011 3.58172 4.08173 0 8.50001 0C12.9183 0 16.5 3.58172 16.5 8C16.5 12.4183 12.9183 16 8.50001 16C7.15078 16 5.87829 15.6656 4.76225 15.0748L1.12128 15.9851C0.950891 16.0277 0.770647 15.9777 0.646457 15.8536C0.522267 15.7294 0.472342 15.5491 0.514939 15.3787L1.42518 11.7378C0.834417 10.6217 0.500011 9.34923 0.500011 8ZM8.50001 1C4.63402 1 1.50001 4.13401 1.50001 8C1.50001 9.24504 1.82462 10.4128 2.39345 11.4247C2.45602 11.536 2.47363 11.6671 2.44266 11.791L1.68719 14.8128L4.70904 14.0574C4.83294 14.0264 4.96399 14.044 5.07531 14.1066C6.08726 14.6754 7.25497 15 8.50001 15C12.366 15 15.5 11.866 15.5 8C15.5 4.13401 12.366 1 8.50001 1Z" />
</svg>
Para poder aplicar un color de relleno, he utilizado el selector y propiedad:
svg {
fill: blue;
}
Esto funciona correctamente pero me gustaría saber si existe alguna posibilidad de que funcione sin tener que verme obligado a poner todo el código del svg en el html. He probado a utilizar la etiqueta img de la siguiente manera:
<img src="rutaImgen.svg" />
Pero esto no funciona... ¿Alguien conoce la solución?
Gracias de antemano.