Merge pull request #646 from gkumar9891/allow-svg-element

allow svg element

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 - Introduced the `allowedEmptyAttributes` option, enabling explicit specification of empty string values for select attributes, with the default attribute set to `alt`.
 
+- Clarified the use of SVGs with a new test and changes to documentation. 
+
 ## 2.11.0 (2023-06-21)
 
 - Fix to allow `false` in `allowedClasses` attributes. Thanks to [Kevin Jiang](https://github.com/KevinSJ) for this fix!

README.md

@@ -265,6 +265,21 @@ allowedAttributes: {
 
 With `multiple: true`, several allowed values may appear in the same attribute, separated by spaces. Otherwise the attribute must exactly match one and only one of the allowed values.
 
+#### "What if I want to maintain the original case for SVG elements and attributes?"
+
+If you're incorporating SVG elements like `linearGradient` into your content and notice that they're not rendering as expected due to case sensitivity issues, it's essential to prevent `sanitize-html` from converting element and attribute names to lowercase. This situation often arises when SVGs fail to display correctly because their case-sensitive tags, such as `linearGradient` and attributes like `viewBox`, are inadvertently lowercased.
+
+To address this, ensure you set `lowerCaseTags: false` and `lowerCaseAttributeNames: false` in the parser options of your sanitize-html configuration. This adjustment stops the library from altering the case of your tags and attributes, preserving the integrity of your SVG content.
+
+```js
+allowedTags: [ 'svg', 'g', 'defs', 'linearGradient', 'stop', 'circle' ],
+allowedAttributes: false,
+parser: {
+  lowerCaseTags: false,
+  lowerCaseAttributeNames: false
+}
+```
+
 ### Wildcards for attributes
 
 You can use the `*` wildcard to allow all attributes with a certain prefix:

test/test.js

@@ -1649,4 +1649,15 @@ describe('sanitizeHtml', function() {
       allowedEmptyAttributes: []
     }), '<img src="https://example.com/" />');
   });
+  it('should support SVG tags', () => {
+    assert.equal(sanitizeHtml('<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="myGradient" gradientTransform="rotate(90)"><stop offset="5%" stop-color="gold"></stop><stop offset="95%" stop-color="red"></stop></linearGradient></defs><circle cx="5" cy="5" r="4" fill="url(\'#myGradient\')"></circle></svg>', {
+      allowedTags: [ 'svg', 'g', 'defs', 'linearGradient', 'stop', 'circle' ],
+      allowedAttributes: false,
+      parser: {
+        lowerCaseTags: false,
+        lowerCaseAttributeNames: false
+      }
+    }), '<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="myGradient" gradientTransform="rotate(90)"><stop offset="5%" stop-color="gold"></stop><stop offset="95%" stop-color="red"></stop></linearGradient></defs><circle cx="5" cy="5" r="4" fill="url(\'#myGradient\')"></circle></svg>');
+  });
+
 });