ExpressionEngine · intoeetive · May 21, 2025 · Oct 27, 2025
diff --git a/system/ee/ExpressionEngine/Addons/file/ft.file.php b/system/ee/ExpressionEngine/Addons/file/ft.file.php
@@ -335,7 +335,7 @@ public function replace_tag($data, $params = array(), $tagdata = false)
             $full_path = ee()->file_field->parse_string($data['url']);
 
             if (isset($params['wrap'])) {
-                return $this->_wrap_it($data, $params['wrap'], $full_path);
+                return $this->_wrap_it($data, $params['wrap'], $full_path, $params);
             }
 
             return $full_path;
@@ -346,7 +346,7 @@ public function replace_tag($data, $params = array(), $tagdata = false)
             $full_path = $data['path'] . $data['filename'] . '.' . $data['extension'];
 
             if (isset($params['wrap'])) {
-                return $this->_wrap_it($data, $params['wrap'], $full_path);
+                return $this->_wrap_it($data, $params['wrap'], $full_path, $params);
             }
 
             return $full_path;
@@ -659,7 +659,7 @@ private function process_image($function = 'resize', $data = [], $params = array
         } elseif ($tagdata === false) {
             // single tag or call from resize_crop
             if (isset($params['wrap'])) {
-                return $this->_wrap_it($data, $params['wrap'], $destination_url);
+                return $this->_wrap_it($data, $params['wrap'], $destination_url, $params);
             }
 
             return ($return_as_path ? $destination_path : $destination_url);
@@ -762,7 +762,7 @@ public function replace_replace($data, $params = array(), $tagdata = false)
     {
         $url = parent::replace_replace($data['url'], $params, $tagdata);
         if (isset($params['wrap'])) {
-            return $this->_wrap_it($data, $params['wrap'], $url);
+            return $this->_wrap_it($data, $params['wrap'], $url, $params);
         }
         return $url;
     }
@@ -826,7 +826,7 @@ public function replace_tag_catchall($data = [], $params = array(), $tagdata = f
             }
 
             if (isset($params['wrap'])) {
-                return $this->_wrap_it($data, $params['wrap'], $full_path);
+                return $this->_wrap_it($data, $params['wrap'], $full_path, $params);
             }
 
             return $full_path;
@@ -838,20 +838,73 @@ public function replace_tag_catchall($data = [], $params = array(), $tagdata = f
      *
      * @access  private
      */
-    public function _wrap_it($data, $type, $full_path)
+    public function _wrap_it($data, $type, $full_path, $params = array())
     {
-        if ($type == 'link') {
-            ee()->load->helper('url_helper');
-
-            return $data['file_pre_format']
-                . anchor($full_path, $data['filename'], $data['file_properties'])
-                . $data['file_post_format'];
-        } elseif ($type == 'image') {
-            $properties = (! empty($data['image_properties'])) ? ' ' . $data['image_properties'] : '';
-
-            return $data['image_pre_format']
-                . '<img src="' . $full_path . '"' . $properties . ' alt="' . $data['filename'] . '" />'
-                . $data['image_post_format'];
+        $passthroughParams = array('class', 'id', 'style', 'title');
+        $title = !empty($data['title']) ? ee('Format')->make('Text', $data['title'])->attributeSafe()->compile() : $data['filename'];
+        switch ($type) {
+            case 'link':
+                ee()->load->helper('url_helper');
+                return $data['file_pre_format']
+                    . anchor($full_path, $data['filename'], $data['file_properties'])
+                    . $data['file_post_format'];
+            case 'image':
+                if (!isset($params['alt'])) {
+                    $params['alt'] = $title;
+                }
+                $passthroughParams = array_merge($passthroughParams, array('alt', 'width', 'height'));
+                $params = array_intersect_key($params, array_flip($passthroughParams));
+                $properties = (! empty($data['image_properties'])) ? ' ' . $data['image_properties'] : '';
+                foreach ($params as $param => $value) {
+                    $value = str_replace(array('height', 'width'), array($data['height'], $data['width']), $value);
+                    $properties .= ' ' . $param . '="' . ee('Format')->make('Text', $value)->attributeSafe()->compile() . '"';
+                }
+                return $data['image_pre_format']
+                    . '<img src="' . $full_path . '"' . $properties . ' />'
+                    . $data['image_post_format'];
+            case 'svg':
+                if (isset($data['model_object']) && !is_null($data['model_object'])) {
+                    if (!$data['model_object']->isSVG()) {
+                        // if the file is not an SVG, fall back to image tag
+                        return _wrap_it($data, 'image', $full_path, $params);
+                    }
+                    $passthroughParams = array_merge($passthroughParams, array('width', 'height'));
+                    $params = array_intersect_key($params, array_flip($passthroughParams));
+                    try {
+                        $content = $data['model_object']->UploadDestination->getFilesystem()->read($data['model_object']->getAbsolutePath());
+                    } catch (FilesystemException $e) {
+                        log_message('debug', $e->getMessage());
+                        return '';
+                    }
+                    if (strpos($content, '<?xml') === 0) {
+                        // remove the XML declaration if it exists
+                        $content = preg_replace('/<\?xml.*?\?>/s', '', $content);
+                    }
+                    if (isset($params['width']) && isset($params['height'])) {
+                        if (strpos($content, 'width="') !== false) {
+                            $content = preg_replace('/(<svg.*? width=")(.*?)"/', '${1}' . $params['width'] . '"', $content);
+                        } else {
+                            $content = preg_replace('/<svg /', '<svg width="' . $params['width'] . '" ', $content);
+                        }
+                        if (strpos($content, 'height="') !== false) {
+                            $content = preg_replace('/(<svg.*? height=")(.*?)"/', '${1}' . $params['height'] . '"', $content);
+                        } else {
+                            $content = preg_replace('/<svg /', '<svg height="' . $params['height'] . '" ', $content);
+                        }
+                        unset($params['width'], $params['height']);
+                    }
+                    if (!empty($params)) {
+                        $attributes = array();
+                        foreach ($params as $param => $value) {
+                            $attributes[] = $param . '="' . ee('Format')->make('Text', $value)->attributeSafe()->compile() . '"';
+                        }
+                        $content = preg_replace('/<svg /', '<svg ' . implode(' ', $attributes) . ' ', $content);
+                    }
+                    return $content;
+                }
+                return $full_path;
+            default:
+                return $full_path;
         }
 
         return $full_path;

diff --git a/tests/cypress/cypress/integration/files/file_types.ee6.js b/tests/cypress/cypress/integration/files/file_types.ee6.js
@@ -0,0 +1,119 @@
+/// <reference types="Cypress" />
+
+import SiteForm from '../../elements/pages/site/SiteForm';
+import SiteManager from '../../elements/pages/site/SiteManager';
+import UploadEdit from '../../elements/pages/files/UploadEdit';
+import FileManager from '../../elements/pages/files/FileManager';
+import UploadSync from '../../elements/pages/files/UploadSync';
+import EditFile from '../../elements/pages/files/EditFile';
+import UploadFile from '../../elements/pages/files/UploadFile';
+
+const { _, $ } = Cypress
+
+const svg_file = '../../themes/ee/asset/img/default-addon-icon.svg'
+const upload_dir = '../../images/uploads'
+
+const editFile = new EditFile;
+
+const uploadPage = new UploadFile;
+const managerPage = new FileManager;
+const uploadEdit = new UploadEdit;
+const siteManager = new SiteManager;
+
+
+context('Different File Types', () => {
+    before(function () {
+        cy.task('db:seed')
+        cy.eeConfig({ item: 'save_tmpl_files', value: 'y' })
+        cy.eeConfig({ item: 'enable_dock', value: 'n' })
+
+        //copy templates
+        cy.task('filesystem:copy', { from: 'support/templates/*', to: '../../system/user/templates/' }).then(() => {
+            cy.authVisit('admin.php?/cp/design')
+        })
+
+    })
+
+    after(function() {
+      cy.eeConfig({ item: 'enable_dock', value: 'y' })
+      cy.task('filesystem:delete', upload_dir+'/\*')
+    })
+
+    it('Upload and display SVG file', () => {
+        cy.intercept("**/filepicker/**").as('ajax')
+
+        cy.visit('admin.php?/cp/files/directory/1')
+        uploadPage.dragAndDropUpload(svg_file)
+        cy.get('.file-upload-widget').should('not.be.visible')
+        cy.wait('@table')
+        cy.hasNoErrors()
+
+        editFile.get('selected_file').should('exist')
+        editFile.get('selected_file').contains("default-addon-icon.svg")
+        editFile.get('selected_file').should('contain', 'Image')
+
+      cy.authVisit('/admin.php?/cp/publish/edit')
+      cy.get('a').contains('Getting to Know ExpressionEngine').click()
+      cy.wait(2000) //wait for picker to initiliaze
+      cy.get('.file-field-filepicker[title=Edit]').click()
+      cy.wait('@ajax')
+      cy.get('.modal-file').should('be.visible')
+      cy.wait(1000)//give JS some extra time
+      let ocean_id = null
+      cy.get('.modal-file .app-listing__row a').contains('default-addon-icon.svg').parents('tr').invoke('attr', 'data-id').then((id) => {
+        ocean_id = id;
+      })
+      cy.wait(1000)//give JS some extra tim
+      cy.get('.modal-file .app-listing__row a').contains('default-addon-icon.svg').click()
+      cy.get('.modal-file').should('not.be.visible')
+      cy.wait(1000)//give JS some extra time
+      cy.get('.js-file-input').invoke('val').then((val) => {
+        expect(val).to.eq('{file:' + ocean_id + ':url}')
+      })
+      cy.get('.fields-upload-chosen-name').should('contain', 'default-addon-icon.svg')
+
+      cy.get('body').type('{ctrl}', {release: false}).type('s')
+      cy.get('.fields-upload-chosen-name').should('contain', 'default-addon-icon.svg')
+
+      cy.on('uncaught:exception', (err, runnable) => {
+        // return false to prevent the error from
+        // failing this test
+        return false
+      })
+
+      cy.visit('/index.php/entries/file-svg')
+      cy.hasNoErrors()
+      cy.get('.svg_image svg').invoke('attr', 'width').then(
+        (width) => {
+          expect(width).to.eq('100')
+        }
+      )
+      cy.get('.svg_image svg').invoke('attr', 'height').then(
+        (height) => {
+          expect(height).to.eq('100')
+        }
+      )
+      cy.get('.svg_image svg').invoke('attr', 'viewBox').then( 
+        (viewBox) => {
+          expect(viewBox).to.eq('0 0 50 50')
+        }
+      )
+      cy.get('.svg_image svg').invoke('attr', 'id').then(
+        (id) => {
+          expect(id).to.eq('svgId')
+        }
+      )
+      cy.get('.svg_image svg').invoke('attr', 'class').then(
+        (className) => {
+          expect(className).to.eq('svgClass')
+        }
+      )
+
+      cy.task('filesystem:delete', upload_dir+'/\*').then(() => {
+        cy.visit('/index.php/entries/file-svg')
+        cy.hasNoErrors()
+      })
+    })
+
+
+})
diff --git a/tests/cypress/support/templates/default_site/entries.group/file-svg.html b/tests/cypress/support/templates/default_site/entries.group/file-svg.html
@@ -0,0 +1,9 @@
+{layout="cypress/layout"}
+{exp:channel:entries entry_id="1"}
+<h1>{title}</h1>
+
+<div class="svg_image">
+    {news_image wrap="svg" id="svgId" class="svgClass" width="100" height="100"}
+</div>
+
+{/exp:channel:entries}