Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Warning shown when using <title> within an inline SVG element

See original GitHub issue

Describe the bug Using a title element within an inline SVG element causes the following warning:

<title> will be treated as an HTML element unless it begins with a capital letter - svelte(component-name-lowercase)

To Reproduce

<svg width="24" height="24" viewBox="0 0 24 24" role="img">
    <title>The GitHub logo</title>
    <path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
</svg>

Expected behavior I don’t think this warning should be shown in this case as <title> is a valid tag within an inline SVG tag so it can’t be assumed to be a Svelte component.

System (please complete the following information):

OS: Windows
IDE: VSCode
Plugin/Package: Svelte for VSCode

Issue Analytics

State:
Created 3 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

1reaction

JamesCoylecommented, Mar 11, 2021

Ah I’ve seen the issue when working through the file changes before committing. I must have mistyped something and VSCode (or one of my extensions) has tried to be helpful and added an import (import title from 'process') to the top of that file so now it thinks there is a Svelte component that has been imported.

My apologies. I should have tested it still occurred in a different file.

0reactions

martgnzcommented, Jul 12, 2021

I think it is. Everything has been working fine on my side. It would be good if this was fixed upstream as using Svelte+D3 is such a common usecase (and line charts are one of the most common chart types!)