Fixed #16258

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Fixed a bug where elements’ `getPrev()` and `getNext()` methods could cause duplicate queries. ([#16329](https://github.com/craftcms/cms/discussions/16329))
 - Fixed a bug where assets that were shorter than the preview thumb container weren’t getting vertically centered within it.
+- Fixed a bug where it was possible to set a focal point on SVGs, even though focal points on SVGs aren’t supported. ([#16258](https://github.com/craftcms/cms/issues/16258))
 
 ## 4.13.6 - 2024-12-10
 

src/image/Svg.php

@@ -162,9 +162,9 @@ public function scaleToFit(?int $targetWidth, ?int $targetHeight, bool $scaleIfS
      */
     public function scaleAndCrop(?int $targetWidth, ?int $targetHeight, bool $scaleIfSmaller = true, array|string $cropPosition = 'center-center'): self
     {
-        // TODO If we encounter a focal point, rasterize and crop with focal.
+        // SVGs don’t support focal points yet
         if (is_array($cropPosition)) {
-            throw new ImageException(Craft::t('app', 'Currently SVG images do not support focal point.'));
+            $cropPosition = 'center-center';
         }
 
         $this->normalizeDimensions($targetWidth, $targetHeight);

src/templates/assets/_previews/image.twig

@@ -1,11 +1,14 @@
 {% set containerId = "asset-image-preview#{random()}" %}
 {% set toggleId = "toggle-focal#{random()}" %}
+{% set enableFocalPoint = asset.mimeType != 'image/svg+xml' %}
 
 <div id="{{ containerId }}" class="button-fade asset-image-preview">
-    <div class="buttons">
-        <div class="btn" id="{{ toggleId }}">
+    {% if enableFocalPoint %}
+        <div class="buttons">
+            <div class="btn" id="{{ toggleId }}">
+            </div>
         </div>
-    </div>
+    {% endif %}
     {{ tag('img', {
         src: url,
         width: asset.width,
@@ -28,17 +31,19 @@
     'Saving…',
 ]) %}
 
-{% js %}
-(() => {
-  if (window.imageFocalPoint) {
-    window.imageFocalPoint.destruct();
-    delete window.imageFocalPoint;
-  }
+{% if enableFocalPoint %}
+  {% js %}
+    (() => {
+      if (window.imageFocalPoint) {
+        window.imageFocalPoint.destruct();
+        delete window.imageFocalPoint;
+      }
 
-  const $container = $('#{{ containerId }}');
-  const $toggle = $('#{{ toggleId }}');
-  if ($container.length && $toggle.length) {
-    window.imageFocalPoint = new Craft.FocalPoint($container, $toggle, {{ editFocal|default(false) }});
-  }
-})();
-{% endjs %}
+      const $container = $('#{{ containerId }}');
+      const $toggle = $('#{{ toggleId }}');
+      if ($container.length && $toggle.length) {
+        window.imageFocalPoint = new Craft.FocalPoint($container, $toggle, {{ editFocal|default(false) }});
+      }
+    })();
+  {% endjs %}
+{% endif %}

src/translations/en/app.php

@@ -442,7 +442,6 @@
     'Current Password' => 'Current Password',
     'Current User Condition' => 'Current User Condition',
     'Current' => 'Current',
-    'Currently SVG images do not support focal point.' => 'Currently SVG images do not support focal point.',
     'Custom' => 'Custom',
     'Customize sources' => 'Customize sources',
     'Custom…' => 'Custom…',