css image page reference

Hi experts,

I'm using a .svg icon in asp.net web forms page.
My page is inside a emtpy ASP.NET web forms application project.

In my css I'm referencing my svg icon like this.

label1{
    background: url('images/testicon1.svg') no-repeat;
}

My page works just fine and I can see my icon just fine.  
But I noticed visual studio is underlining my icon path with purple and when i hover over the purple I see this message

In the pic below I scribbled over the actual path. Just to post my question here.

message i'm getting on my svg path in my css
Anyone know why I'm getting this message? How do I get rid of this message?
Am I not referencing my svg icon correctly?
LVL 1
maqskywalkerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
It's all good mate.
It's just VS trying to play the smart guy.

This is a recommendation for all really small images that it's probably better to inline the image than to make an HTTP request for it.
You can do it for svg's as described here in detail
<img src='data:image/svg+xml;utf8,<svg ... > ... </svg>'>

Open in new window


As for disabling the warning, I don't think you can disable just some warnings
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Alexandre SimõesManager / Technology SpecialistCommented:
Here's some documentation from MS about the HTML validations config:
https://msdn.microsoft.com/en-us/library/0byxkfet(v=vs.100).aspx

So basically either you turn them all on or off.
0
David S.Commented:
As the message indicates, you can optimize performance by inlining the image instead of using another HTTP request for it. Remember that there is overhead for every additional file you load in your page.

Here is an easy to use online tool for converting the markup of an SVG (and other things) to base64: https://www.base64encode.org/

So for example, instead of having a file that contains the following and referencing it like you normally would
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<linearGradient id="ucgg" gradientUnits="userSpaceOnUse" y2="100%">
<stop offset="0%" stop-color="#3bbeb6"/>
<stop offset="100%" stop-color="#1374be"/>
</linearGradient>
<rect width="1" height="1" fill="url(#ucgg)"/>
</svg>

Open in new window

you use this:
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPg0KPGxpbmVhckdyYWRpZW50IGlkPSJ1Y2dnIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeTI9IjEwMCUiPg0KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNiYmViNiIvPg0KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMTM3NGJlIi8+DQo8L2xpbmVhckdyYWRpZW50Pg0KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCN1Y2dnKSIvPg0KPC9zdmc+");

Open in new window

This page is a bit old now, but it gives a good explanation of this: http://www.websiteoptimization.com/speed/tweak/inline-images/
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.