[Bug]: Badly formatted SVG in the playground #1564

📝 Issue Description

The SVG provided in the JSX tutorial raises a linter error. If this is intentional, it's clever, but as-is, it's a bit confusing.

Here's the SVG provided:

<svg height="300" width="400">
  <defs>
    <linearGradient id="gr1" x1="0%" y1="60%" x2="100%" y2="0%">
      <stop offset="5%" style="stop-color:rgb(255,255,3);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="125" cy="150" rx="100" ry="60" fill="url(#gr1)" />
  Sorry but this browser does not support inline SVG.
</svg>

This raises a linter error, https://snipboard.io/Djn564.jpg "Use an object for the style prop instead of a string.
eslint(solid/style-prop)". The preferred format is apparently style={{ "stop-color" : "rgb(255,255,3)", "stop-opacity" : "1" }}.

📋 On which page(s) it occurs

https://www.solidjs.com/tutorial/introduction_jsx

🤔 Expected Behavior

I expected the SVG to be to-par. I found it an interesting exercise to repair the SVG to linter standard. That being said, the linter error is non-obvious, and so may be inappropriate for an Introduction.

👀 Current Behavior

https://snipboard.io/Djn564.jpg

🖥️ Browser

Chrome 149.0.7827.114

📄 Additional Information

No response