Search code examples
htmlmobileinputsvgembed

How to Include SVG file as <input> background


I'm a newbie to the SVG world, just started experimenting today. I'm trying to create a mobile site where the primary graphics are all scalable, thus supporting all display resolutions.

I created an svg file for my input (currently type="image"), and suprisingly the results are as expected in my code editor (Coda). In testing (mobile Safari, DT Safari and DT FF), the input displays broken image path placeholder (the oath is correct because I can right-click to download the file).

How do I go about including my SVG file in the (html5) document?


Solution

  • See Using SVG in background-image. The CSS for placing a background image in an input is the same as for any other element:

    input { background-image:url('foo.svg') }