Use static resource svg file in lightning web components

 Yes, we can access svg resource from static resource to lightning web components for reusability and quick load of component. 

Also Read: How to use Image type files in LWC

Access SVG images in a static resource from LWC

Step: 1

First edit your svg file and add id to svg tag.

<svg id="sfdclogo" xmlns="http://www.w3.org/2000/svg" width="200" height="140" viewBox="0 0 200 140">

Step: 2

Upload svg file into static resource.

Step: 3

Import static resource in js file of your LWC.

import SF_LOGO from '@salesforce/resourceUrl/salesforceLogo';

Step: 4

assign imported svg variable with id to a new variable.

sfdcLogoURL = `${SF_LOGO}#sfdclogo`;

here #sfdclogo is Id we have added in step 1.

Let's see with an example. 

accessSvgFromStaticResource.html

<template>
    <lightning-card title="Access Static resource svg file in LWC" icon-name="standard:account">
        <div class="slds-m-around_medium">
            <svg xmlns="http://www.w3.org/2000/svg">
                <use href={sfdcLogoURL}></use>
            </svg>
        </div>
    </lightning-card>  
</template>

accessSvgFromStaticResource.js

import { LightningElement } from 'lwc';
import SF_LOGO from '@salesforce/resourceUrl/salesforceLogo';

export default class AccessSvgFromStaticResource extends LightningElement {
    sfdcLogoURL = `${SF_LOGO}#sfdclogo`;
}

accessSvgFromStaticResource.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>49.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

Static resource file: Salesforce logo svg.

Also found above code in Tech Shorts Git repo