diff --git a/docs/API-Reference/editor/Editor.md b/docs/API-Reference/editor/Editor.md
index 73959a621..ca59e8a27 100644
--- a/docs/API-Reference/editor/Editor.md
+++ b/docs/API-Reference/editor/Editor.md
@@ -59,7 +59,7 @@ const Editor = brackets.getModule("editor/Editor")
         * [.getMarksAfter(position, markType)](#Editor+getMarksAfter) ⇒ <code>Array.&lt;TextMarker&gt;</code>
         * [.getMarksBefore(position, markType)](#Editor+getMarksBefore) ⇒ <code>Array.&lt;TextMarker&gt;</code>
         * [.getAllMarks([markType])](#Editor+getAllMarks) ⇒ <code>Array.&lt;TextMarker&gt;</code>
-        * [.clearAllMarks([markType])](#Editor+clearAllMarks)
+        * [.clearAllMarks([markType], [lineNumbers])](#Editor+clearAllMarks)
         * [.isSamePosition(position1, position2)](#Editor+isSamePosition) ⇒ <code>boolean</code>
         * [.getHistory()](#Editor+getHistory) ⇒ <code>Array</code>
         * [.setHistory()](#Editor+setHistory)
@@ -729,14 +729,16 @@ Returns an array containing all marked ranges in the document.
 
 <a name="Editor+clearAllMarks"></a>
 
-### editor.clearAllMarks([markType])
-Clears all mark of the given type. If nothing is given, clears all marks(Don't use this API without types!).
+### editor.clearAllMarks([markType], [lineNumbers])
+Clears all marks of the given type. If a lineNumbers array is given, only clears marks on those lines.
+If no markType or lineNumbers are given, clears all marks (use cautiously).
 
 **Kind**: instance method of [<code>Editor</code>](#Editor)  
 
 | Param | Type | Description |
 | --- | --- | --- |
 | [markType] | <code>string</code> | Optional, if given will only delete marks of that type. Else delete everything. |
+| [lineNumbers] | <code>Array.&lt;number&gt;</code> | Optional, array of line numbers where marks should be cleared. |
 
 <a name="Editor+isSamePosition"></a>
 
diff --git a/src/extensionsIntegrated/CSSColorPreview/main.js b/src/extensionsIntegrated/CSSColorPreview/main.js
index 5e2927efc..3d55cdfaf 100644
--- a/src/extensionsIntegrated/CSSColorPreview/main.js
+++ b/src/extensionsIntegrated/CSSColorPreview/main.js
@@ -48,6 +48,9 @@ define(function (require, exports, module) {
         COLOR_LANGUAGES= ["css", "scss", "less", "sass", "stylus", "html", "svg", "jsx", "tsx",
             "php", "ejs", "erb_html", "pug"];
 
+    const SVG_REGEX = /(:[^;]*;?|(?:fill|stroke|stop-color|flood-color|lighting-color|background-color|border-color|from|to)\s*=\s*(['"]?)[^'";]*\2)/g,
+        CSS_REGEX = /:[^;]*;?/g; // the last semi colon is optional.
+
 
     // For preferences settings, to toggle this feature on/off
     const PREFERENCES_CSS_COLOR_PREVIEW = "colorPreview";
@@ -323,13 +326,14 @@ define(function (require, exports, module) {
      */
     function detectValidColorsInLine(editor, lineNumber) {
         const lineText = editor.getLine(lineNumber);
+        const languageID = editor.document.getLanguage().getId();
 
         // to make sure that code doesn't break when lineText is null.
         if (!lineText) {
             return [];
         }
 
-        const valueRegex = /:[^;]*;?/g; // the last semi colon is optional.
+        const valueRegex = languageID === "svg" ? SVG_REGEX: CSS_REGEX;
         const validColors = [];
 
         // Find all property value sections in the line
diff --git a/test/spec/CSSColorPreview-test-files/base.svg b/test/spec/CSSColorPreview-test-files/base.svg
new file mode 100644
index 000000000..8639b5f7f
--- /dev/null
+++ b/test/spec/CSSColorPreview-test-files/base.svg
@@ -0,0 +1,26 @@
+<svg width="200px" height="100px" xmlns="http://www.w3.org/2000/svg">
+    <rect width="100%" height="100%" fill="#7f6ad3" />
+    <circle cx="50" cy="50" r="40">
+        <animate attributeName="fill" from="red" to="blue" dur="2s" repeatCount="indefinite" />
+    </circle>
+    <symbol id="mySymbol">
+        <circle cx="10" cy="10" r="10" fill="red" stroke="#00ff00" />
+    </symbol>
+    <use href="#mySymbol" x="20" y="20" />
+    <filter id="floodFilter">
+        <feFlood flood-color='yellow' flood-opacity="0.5" />
+    </filter>
+    <rect width="100" height="100" filter="url(#floodFilter)" />
+    <style>
+        .my-rect {
+        fill: coral;
+        stroke: navy;
+        }
+    </style>
+    <rect class="my-rect" x="100" y="100" width="100" height="100" />
+    <linearGradient id="grad1">
+        <stop offset="0%" stop-color="red" />
+        <stop offset="100%" stop-color="blue" />
+    </linearGradient>
+    <rect x="10" y="100" width="100" height="100" fill="url(#grad1)" />
+</svg>
diff --git a/test/spec/Extn-CSSColorPreview-integ-test.js b/test/spec/Extn-CSSColorPreview-integ-test.js
index e8ae50b04..798475642 100644
--- a/test/spec/Extn-CSSColorPreview-integ-test.js
+++ b/test/spec/Extn-CSSColorPreview-integ-test.js
@@ -319,5 +319,27 @@ define(function (require, exports, module) {
 
             await __PR.closeFile();
         });
+
+        it(`should color gutter appear for SVG files`, async function () {
+            await __PR.openFile("base.svg");
+            const editor = EditorManager.getActiveEditor();
+            __PR.validateEqual(editor.isGutterActive(GUTTER_NAME), true);
+
+            // the line with cursor if there is no color should have a dummy color gutter
+            __PR.setCursors(["1:1"]);
+            for(let i in [0, 2, 4, 5, 7, 8, 9, 11, 12, 13, 14, 17, 18, 19, 20]){
+                validateNoColors(editor, i);
+            }
+            validateSingleColor(editor, 1, "#7f6ad3"); // fill attr
+            validateMultipleColors(editor, 3, ["red", "blue"]); // from, to attrs
+            validateMultipleColors(editor, 6, ["red", "#00ff00"]); // stroke attr
+            validateSingleColor(editor, 10, "yellow"); // flood-color attr
+            validateSingleColor(editor, 15, "coral"); // in css style tags
+            validateSingleColor(editor, 16, "navy"); // in css style tag
+            validateSingleColor(editor, 21, "red"); // stop-color attr
+            validateSingleColor(editor, 22, "blue"); // stop-color attr
+            await __PR.closeFile();
+
+        });
     });
 });