Support for svg images in q-img placeholder-src

Is your feature request related to a problem? Please describe. We’re currently using the 'face.png file in<q-img>`:

<template>
  <div>
    <q-chip clickable @click="goToProfilePage" class="absolute-right">
      {{ profile.givenName || t('general.welcome') }}
      <q-avatar class="q-avatar--right">
        <q-img
          :src="photo"
          spinner-color="black"
          width="38px"
          transition="scale"
          ratio="1"
          placeholder-src="img/account.png"
        />
      </q-avatar>
    </q-chip>
  </div>
</template>

Which is correctly visible in the header like we want:

The only downside is that when darkMode is enabled the placeholder-src image is not visible as it is black and transparant. So we tried using the svg file by storing it in \public. But whatever we try we can’t get it to show as a placeholder.

Describe the solution you’d like Support for .svg and material icons.

Describe alternatives you’ve considered Simpy using two different .png files, one for darkMode and one for not darkMode.

Additional context Small codepen. I asked the same question on Discords but no answer, so I’m asking it here.

[DarkLite1]

Sorry about the duplicate, had some issues posting the question. We could do your suggestion @hawkeye64 but that leads to extra images and it would be great to keep the bundle small. Ideally we would just like to use only one svg with different arguments, being fill="black" or fill="white".

[DarkLite1]

Thank you Dan, I must be doing something wrong then because I couldn’t make that work. Anyway, it’s proven it does, so the mistake must be on my part. Thank you for the example. closing this one.