Skip to content

Commit 2d6c4dd

Browse files
aatanasovdevaatanasovdev
committed
Render SVG inline
1 parent f671efc commit 2d6c4dd

File tree

4 files changed

+216
-11
lines changed

4 files changed

+216
-11
lines changed

‎css/cloudinary.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎php/class-utils.php‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1359,4 +1359,212 @@ public static function get_transformations_title( $context ) {
13591359

13601360
return $transformations_title;
13611361
}
1362+
1363+
/**
1364+
* Get inline SVG content safely.
1365+
*
1366+
* @param string $file_path The absolute or relative path to the SVG file.
1367+
* @param bool $echo Whether to echo the SVG content or return it. Default true.
1368+
*
1369+
* @return string|void The SVG content if $echo is false, void otherwise.
1370+
*/
1371+
public static function get_inline_svg( $file_path, $echo = true ) {
1372+
// If relative path, make it absolute from plugin root.
1373+
if ( ! file_exists( $file_path ) ) {
1374+
$plugin_dir = dirname( __DIR__ );
1375+
$file_path = $plugin_dir . '/' . ltrim( $file_path, '/' );
1376+
}
1377+
1378+
// Check if file exists and is an SVG.
1379+
if ( ! file_exists( $file_path ) || 'svg' !== pathinfo( $file_path, PATHINFO_EXTENSION ) ) {
1380+
return $echo ? '' : '';
1381+
}
1382+
1383+
// Get the SVG content.
1384+
$svg_content = file_get_contents( $file_path ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents
1385+
1386+
if ( false === $svg_content ) {
1387+
return $echo ? '' : '';
1388+
}
1389+
1390+
// Sanitize SVG content to prevent XSS attacks.
1391+
$svg_content = self::sanitize_svg( $svg_content );
1392+
1393+
if ( $echo ) {
1394+
echo $svg_content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Sanitized by sanitize_svg.
1395+
} else {
1396+
return $svg_content;
1397+
}
1398+
}
1399+
1400+
/**
1401+
* Sanitize SVG content to prevent XSS attacks.
1402+
*
1403+
* @param string $svg_content The SVG content to sanitize.
1404+
*
1405+
* @return string The sanitized SVG content.
1406+
*/
1407+
public static function sanitize_svg( $svg_content ) {
1408+
// Define allowed SVG tags and attributes.
1409+
$allowed_tags = array(
1410+
'svg' => array(
1411+
'class' => true,
1412+
'aria-hidden' => true,
1413+
'aria-labelledby' => true,
1414+
'role' => true,
1415+
'xmlns' => true,
1416+
'width' => true,
1417+
'height' => true,
1418+
'viewbox' => true,
1419+
'fill' => true,
1420+
'stroke' => true,
1421+
),
1422+
'g' => array(
1423+
'fill' => true,
1424+
'stroke' => true,
1425+
'transform' => true,
1426+
'class' => true,
1427+
),
1428+
'title' => array( 'title' => true ),
1429+
'desc' => array(),
1430+
'path' => array(
1431+
'd' => true,
1432+
'fill' => true,
1433+
'stroke' => true,
1434+
'stroke-width' => true,
1435+
'stroke-linecap' => true,
1436+
'stroke-linejoin' => true,
1437+
'transform' => true,
1438+
'class' => true,
1439+
),
1440+
'rect' => array(
1441+
'x' => true,
1442+
'y' => true,
1443+
'width' => true,
1444+
'height' => true,
1445+
'rx' => true,
1446+
'ry' => true,
1447+
'fill' => true,
1448+
'stroke' => true,
1449+
'stroke-width' => true,
1450+
'transform' => true,
1451+
'class' => true,
1452+
),
1453+
'circle' => array(
1454+
'cx' => true,
1455+
'cy' => true,
1456+
'r' => true,
1457+
'fill' => true,
1458+
'stroke' => true,
1459+
'stroke-width' => true,
1460+
'transform' => true,
1461+
'class' => true,
1462+
),
1463+
'ellipse' => array(
1464+
'cx' => true,
1465+
'cy' => true,
1466+
'rx' => true,
1467+
'ry' => true,
1468+
'fill' => true,
1469+
'stroke' => true,
1470+
'stroke-width' => true,
1471+
'transform' => true,
1472+
'class' => true,
1473+
),
1474+
'line' => array(
1475+
'x1' => true,
1476+
'y1' => true,
1477+
'x2' => true,
1478+
'y2' => true,
1479+
'stroke' => true,
1480+
'stroke-width' => true,
1481+
'transform' => true,
1482+
'class' => true,
1483+
),
1484+
'polyline' => array(
1485+
'points' => true,
1486+
'fill' => true,
1487+
'stroke' => true,
1488+
'stroke-width' => true,
1489+
'transform' => true,
1490+
'class' => true,
1491+
),
1492+
'polygon' => array(
1493+
'points' => true,
1494+
'fill' => true,
1495+
'stroke' => true,
1496+
'stroke-width' => true,
1497+
'transform' => true,
1498+
'class' => true,
1499+
),
1500+
'defs' => array(),
1501+
'lineargradient' => array(
1502+
'id' => true,
1503+
'x1' => true,
1504+
'y1' => true,
1505+
'x2' => true,
1506+
'y2' => true,
1507+
'gradientunits' => true,
1508+
),
1509+
'radialgradient' => array(
1510+
'id' => true,
1511+
'cx' => true,
1512+
'cy' => true,
1513+
'r' => true,
1514+
'gradientunits' => true,
1515+
),
1516+
'stop' => array(
1517+
'offset' => true,
1518+
'stop-color' => true,
1519+
'stop-opacity' => true,
1520+
),
1521+
'use' => array(
1522+
'xlink:href' => true,
1523+
'href' => true,
1524+
),
1525+
'clippath' => array( 'id' => true ),
1526+
'mask' => array( 'id' => true ),
1527+
'pattern' => array(
1528+
'id' => true,
1529+
'x' => true,
1530+
'y' => true,
1531+
'width' => true,
1532+
'height' => true,
1533+
'patternunits' => true,
1534+
),
1535+
'text' => array(
1536+
'x' => true,
1537+
'y' => true,
1538+
'fill' => true,
1539+
'font-size' => true,
1540+
'font-family' => true,
1541+
'text-anchor' => true,
1542+
'transform' => true,
1543+
'class' => true,
1544+
),
1545+
'tspan' => array(
1546+
'x' => true,
1547+
'y' => true,
1548+
'fill' => true,
1549+
'font-size' => true,
1550+
'font-family' => true,
1551+
'class' => true,
1552+
),
1553+
);
1554+
1555+
/**
1556+
* Filter the allowed SVG tags and attributes.
1557+
*
1558+
* @hook cloudinary_allowed_svg_tags
1559+
* @since 3.2.15
1560+
*
1561+
* @param $allowed_tags {array} The allowed SVG tags and their attributes.
1562+
*
1563+
* @return {array}
1564+
*/
1565+
$allowed_tags = apply_filters( 'cloudinary_allowed_svg_tags', $allowed_tags );
1566+
1567+
// Use wp_kses to sanitize the SVG content.
1568+
return wp_kses( $svg_content, $allowed_tags );
1569+
}
13621570
}

‎php/media/class-global-transformations.php‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -680,9 +680,7 @@ public function transformations_column_value( $column_name, $attachment_id ) {
680680
echo 'cld_transformations__icon--active';}
681681
?>
682682
">
683-
<svg viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
684-
<path d="M1.23333 14.1C0.888889 14.1 0.597222 13.9806 0.358333 13.7417C0.119444 13.5028 0 13.2111 0 12.8667C0 12.5222 0.119444 12.2306 0.358333 11.9917C0.597222 11.7528 0.888889 11.6333 1.23333 11.6333H11.7667C12.1111 11.6333 12.4028 11.7528 12.6417 11.9917C12.8806 12.2306 13 12.5222 13 12.8667C13 13.2111 12.8806 13.5028 12.6417 13.7417C12.4028 13.9806 12.1111 14.1 11.7667 14.1H1.23333ZM3 9.33333C2.73333 9.33333 2.54167 9.25278 2.425 9.09167C2.30833 8.93056 2.3 8.72778 2.4 8.48333L5.51667 0.683333C5.59444 0.494444 5.72778 0.333333 5.91667 0.2C6.10556 0.0666667 6.30556 0 6.51667 0C6.72778 0 6.92778 0.0666667 7.11667 0.2C7.30556 0.333333 7.43889 0.494444 7.51667 0.683333L10.6 8.46667C10.7 8.71111 10.6944 8.91667 10.5833 9.08333C10.4722 9.25 10.2778 9.33333 10 9.33333C9.87778 9.33333 9.75833 9.29444 9.64167 9.21667C9.525 9.13889 9.44445 9.03889 9.4 8.91667L8.61667 6.88333H4.36667L3.58333 8.93333C3.53889 9.04444 3.46389 9.13889 3.35833 9.21667C3.25278 9.29444 3.13333 9.33333 3 9.33333ZM4.78333 5.76667H8.2L6.53333 1.33333H6.46667L4.78333 5.76667Z" fill="currentColor"/>
685-
</svg>
683+
<?php Utils::get_inline_svg( 'css/images/transformation_edit.svg', true ); ?>
686684
</span>
687685

688686
<span class="cld_transformations__icon
@@ -691,9 +689,7 @@ public function transformations_column_value( $column_name, $attachment_id ) {
691689
echo 'cld_transformations__icon--active';}
692690
?>
693691
">
694-
<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
695-
<path d="M10.8667 9.86667V3.83333H4.83333V2.7H10.8667C11.1778 2.7 11.4444 2.81111 11.6667 3.03333C11.8889 3.25556 12 3.52222 12 3.83333V9.86667H10.8667ZM11.4333 14.7C11.2667 14.7 11.1306 14.6472 11.025 14.5417C10.9194 14.4361 10.8667 14.3 10.8667 14.1333V12H3.83333C3.52222 12 3.25556 11.8889 3.03333 11.6667C2.81111 11.4444 2.7 11.1778 2.7 10.8667V3.83333H0.566667C0.4 3.83333 0.263889 3.77778 0.158333 3.66667C0.0527777 3.55556 0 3.42222 0 3.26667C0 3.1 0.0527777 2.96389 0.158333 2.85833C0.263889 2.75278 0.4 2.7 0.566667 2.7H2.7V0.566667C2.7 0.4 2.75556 0.263889 2.86667 0.158333C2.97778 0.0527777 3.11111 0 3.26667 0C3.43333 0 3.56944 0.0527777 3.675 0.158333C3.78056 0.263889 3.83333 0.4 3.83333 0.566667V10.8667H14.1333C14.3 10.8667 14.4361 10.9222 14.5417 11.0333C14.6472 11.1444 14.7 11.2778 14.7 11.4333C14.7 11.6 14.6472 11.7361 14.5417 11.8417C14.4361 11.9472 14.3 12 14.1333 12H12V14.1333C12 14.3 11.9444 14.4361 11.8333 14.5417C11.7222 14.6472 11.5889 14.7 11.4333 14.7Z" fill="currentColor"/>
696-
</svg>
692+
<?php Utils::get_inline_svg( 'css/images/text_overlay.svg', true ); ?>
697693
</span>
698694

699695
<span class="cld_transformations__icon
@@ -702,10 +698,7 @@ public function transformations_column_value( $column_name, $attachment_id ) {
702698
echo 'cld_transformations__icon--active';}
703699
?>
704700
">
705-
<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
706-
<path d="M13.7 8.47283C13.7 8.7795 13.587 9.04539 13.361 9.2705C13.1351 9.49572 12.8683 9.60833 12.5605 9.60833L5.22717 9.60833C4.9205 9.60833 4.65461 9.49572 4.4295 9.2705C4.20428 9.04539 4.09167 8.7795 4.09167 8.47283L4.09167 1.1395C4.09167 0.831722 4.20428 0.564889 4.4295 0.339C4.65461 0.113 4.9205 3.71033e-07 5.22717 3.57628e-07L12.5605 0C12.8683 -1.34534e-08 13.1351 0.112999 13.361 0.338999C13.587 0.564888 13.7 0.831722 13.7 1.1395V8.47283ZM12.5605 8.47283V1.1395L5.22717 1.1395L5.22717 8.47283L12.5605 8.47283ZM11.2262 11.6522L3.18333 11.6522C2.87556 11.6522 2.60872 11.5396 2.38283 11.3143C2.15683 11.0892 2.04383 10.8233 2.04383 10.5167L2.04383 2.47383C2.04383 2.31361 2.09944 2.17894 2.21067 2.06983C2.32189 1.96072 2.45794 1.90617 2.61883 1.90617C2.77972 1.90617 2.914 1.96072 3.02167 2.06983C3.12944 2.17894 3.18333 2.31361 3.18333 2.47383L3.18333 10.5167H11.2262C11.3864 10.5167 11.5211 10.5715 11.6302 10.6812C11.7393 10.7908 11.7938 10.9262 11.7938 11.0873C11.7938 11.2484 11.7393 11.3828 11.6302 11.4905C11.5211 11.5983 11.3864 11.6522 11.2262 11.6522ZM9.22617 13.7H1.1395C0.831722 13.7 0.56489 13.587 0.339001 13.361C0.113001 13.1351 3.71081e-07 12.8683 3.57628e-07 12.5605L0 4.47383C-7.00354e-09 4.31361 0.0548332 4.17894 0.1645 4.06983C0.274167 3.96072 0.410222 3.90617 0.572666 3.90617C0.735111 3.90617 0.870166 3.96072 0.977833 4.06983C1.08561 4.17894 1.1395 4.31361 1.1395 4.47383L1.1395 12.5605L9.22617 12.5605C9.38639 12.5605 9.52106 12.6153 9.63017 12.725C9.73928 12.8347 9.79383 12.9707 9.79383 13.1332C9.79383 13.2956 9.73928 13.4307 9.63017 13.5383C9.52106 13.6461 9.38639 13.7 9.22617 13.7Z" fill="currentColor"/>
707-
<path d="M9.17951 6.5152L8.35434 5.4027C8.30179 5.3417 8.23729 5.31053 8.16084 5.3092C8.0844 5.30787 8.02106 5.33787 7.97084 5.3992L7.13034 6.51853C7.07734 6.60209 7.07179 6.68631 7.11368 6.7712C7.15545 6.85609 7.2234 6.89853 7.31751 6.89853H11.7748C11.8635 6.89853 11.9301 6.85609 11.9747 6.7712C12.0192 6.68631 12.0151 6.60209 11.9622 6.51853L10.7668 4.93553C10.7155 4.87487 10.652 4.84453 10.5763 4.84453C10.5007 4.84453 10.4377 4.8752 10.3875 4.93653L9.17951 6.5152Z" fill="currentColor"/>
708-
</svg>
701+
<?php Utils::get_inline_svg( 'css/images/image_overlay.svg', true ); ?>
709702
</span>
710703
</a>
711704

‎src/css/components/_brand.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,10 @@
175175
svg {
176176
width: 18px;
177177
height: 18px;
178+
179+
path {
180+
fill: currentColor;
181+
}
178182
}
179183
}
180184
}

0 commit comments

Comments
 (0)