Comment utiliser les icônes SVG dans l'interface utilisateur Telerik pour les contrôles ASP.NET AJAX

Dans ce blog, nous allons vous montrer les principaux avantages des SVG personnalisables (Scalable Vector Graphics) par rapport aux icônes de polices largement utilisées. Vous trouverez une brève comparaison des avantages et des inconvénients ainsi que quelques exemples d'utilisation de la flexibilité supplémentaire des SVG dans certains composants de la suite Telerik UI pour ASP.NET AJAX .

Nous avons initialement commencé le sujet de l'utilisation d'icônes personnalisées dans l'interface utilisateur Telerik pour les contrôles ASP.NET AJAX avec 4 façons d'incorporer une police impressionnante dans l'interface utilisateur Telerik pour les contrôles ASP.NET AJAX . Dans cet article, nous approfondissons le sujet et introduisons les icônes SVG plus flexibles et complexes.

Do you comme la réactivité du logo SVG ci-dessus? Allez-y et découvrez comment réaliser la même chose et utilisez-le dans votre application Telerik.

Voici ce que nous allons couvrir:

1. Comparaison des icônes SVG et de police
2. Incorporer un SVG dans une page
3. Icône SVG multicolore dans Telerik RadToolBar
4. Icônes SVG de style dynamique dans Template — RadGrid
5. Icônes SVG réactives dans RadTabStrip
6. Ressources d'icônes SVG supplémentaires
7. Conclusion

Comparaison des icônes SVG et polices

Bien que nous sont à l'aise avec les icônes de polices populaires et faciles à utiliser, il semble que nous pouvons faire beaucoup plus avec les SVG.

Le principal avantage des SVG est le contrôle total sur les graphiques qu'ils fournissent. Avec l'aide de CSS et JavaScript, les icônes SVG peuvent être multicolores, de style dynamique et même animées. Cela les rend adaptés à presque partout où une icône est nécessaire.

De plus, une meilleure prise en charge de l'accessibilité est un grand avantage des SVG dans les cas où la conformité d'accessibilité est requise.

Le tableau ci-dessous donne un aperçu des principales différences entre SVG et icônes de police:

Incorporer le SVG dans une page

Avec la prise en charge croissante du SVG par le navigateur, il semble y avoir plusieurs façons d'afficher le vecteur graphiques dans une page Web. Pourtant, il existe deux principales approches conceptuellement différentes: en ligne dans le cadre du DOM et référencée en externe avec une URL ou un chemin d'accès au fichier. La personnalisation du SVG dépend de l'approche pour ajouter le SVG:

Ajouter une icône avec une URL

L'ajout de l'icône avec son URL se fait de la même manière que l'ajout de toute autre image à la page. L'utilisation de l'URL du fichier SVG comme image ou image d'arrière-plan peut être facilement réalisée dans la déclaration de balisage de la page ou ajoutée avec du CSS.

Voici le contenu du fichier «SVGs / ProgressLogo.svg» que nous utiliserons comme image à l'intérieur du bouton:

 <img src =  "SVGs / ProgressLogo.svg"  Height =  "150px"  alt =  "Progress logo"  / >

Ou:

  {
 background-image :  url ("SVGs / ProgressLogo.svg") ; 
} 

Cependant, manipuler les parties internes du SVG avec CSS ou JavaScript n'est pas possible après le chargement de l'image. Le chargement du SVG à partir d'une ressource externe nécessite une requête http supplémentaire, ce qui est un inconvénient de cette méthode en termes de performances.

Ajouter une icône en ligne

L'approche en ligne est légèrement plus complexe mais permet une plus grande personnalisation à l'exécution de l'icône . Le SVG dans ce cas fait partie du DOM et peut être traité avec JS et CSS comme n'importe quel autre élément html.

Les options pour charger l'icône SVG dans le cadre du DOM incluent:

• Le déclarer dans le balisage du page. Partout où les champs de modèle sont exposés (par exemple un ContentTemplate ) et que le HTML natif est autorisé, il est parfait d'ajouter le SVG directement à la structure de la page:

 < ContentTemplate > [19659066] < chemin    ...  />   
 ...
 </  svg > 
  </  ContentTemplate > 
  </  telerik:  RadButton >   
  

• L'imbrication dans une balise . (Voir Utilisation de SVG comme .)

• Ajout d'une icône SVG au runtime DOM. Bien que cela soit possible, cela peut être assez délicat, car cela nécessite une certaine maîtrise de JavaScript et pourrait entraîner des problèmes de performances. Par conséquent, nous ne traiterons pas de cette approche dans ce blog.

Le SVG est basé sur XML et tous les éléments du graphique sont définis avec des balises XML séparées, reconnues par les navigateurs. Cette structure permet d'appliquer des attributs ou d'assigner des classes à chaque élément du SVG et de le styliser indépendamment du reste de l'image.

Utilisons un logo Progress multicolore dans un RadToolBarButton à l'intérieur d'un RadToolBar control .

Cet exemple montre comment utiliser le SVG comme icône statique dans le modèle ToolBarButton, il convient donc pour référencer l'icône SVG en tant qu'image en utilisant son URL.

Plusieurs couleurs dans la déclaration SVG ci-dessous sont obtenues par définition d'attributs de remplissage (couleur) et de contour (couleur de bordure) différents pour les éléments séparés:

ProgressLogo.svg

  < svg    xmlns  =  "  http://www.w3.org/2000/svg  "    width  = "  100%  "    height  =  " 100% "     viewBox  =  " 0 0 49 60.3 " > [19659692]  < chemin    fill  =  " # 333 "     stroke  =  " # 5ce500  "    d  = "  M11.2 14.9L0 21.3l17.4 10.1v20.1l11.2-6.4c.5-.3.9-1 .9 -1.6V24.4L13 14.9c-.5-.3-1.3-.3-1.8 0z  ">    </  chemin > [19659692]  < chemin    fill  =  " # 5ce500 "     stroke  =  " # 333  "    d  = "  M12.1 48.4V34.5L0 41.5zM25 .2c-.5-.3-1.3-.3-1.8 0L10.7 7.4 l24.1 13.9v27.9L47.3 42c.5-.3.9-1 .9-1.6V13.6L25 .2z  ">    </  chemin [19659055]> 
  </  svg > 
 

Déclaration de base du RadToolBar et de notre cible RadToolBarButton:

  < telerik:  RadT oolBar    ID  =  " RadToolBar1 "     runat  =  " server " > [19659692]  < Items > 
  < telerik:  RadToolBarButton    ImageUrl  =  " SVGs / ProgressLogo.svg  "    Hauteur  = "  50  "    Largeur  = "  50  "[19659152]>    </  telerik:  RadToolBarButton > 
  </  Items > 
  < /  telerik:  RadToolBar > 
 

Voici l'apparence que nous avons obtenue avec le code ci-dessus:

Icônes SVG de style dynamique dans un modèle — RadGrid

Pour pouvoir obtenir autant que possible ou t de l'interactivité des icônes SVG, nous aurions besoin de les ajouter dans le cadre du DOM.

La flexibilité du contrôle populaire RadGrid nous donne la possibilité d'utiliser une colonne de modèle pour incorporer notre SVG spécial

Nous pouvons remplacer la colonne d'édition créée automatiquement d'une grille par une GridTemplateColumn . ItemTemplate nous permet d'utiliser du HTML pur dans le contenu de notre cellule afin que nous puissions intégrer l'icône SVG en tant qu'élément en ligne:

  < telerik:  GridTemplateColumn   UniqueName  =  ] " customEditColumn "    HeaderText  =  " Edit "    ItemStyle-Height  =  "  35px  "   HeaderStyle-Width  = "  60px  "> 
  < ItemTemplate [19659055]> 
  < telerik:  RadButton   ButtonType  =  " LinkButton "    CssClass  = [19659055] " gridEditButton "    runat  =  " server "    ID  =  " RadButton1  "   AutoPostBack  = [19659055] " true "    CommandName  =  '' > 
  < ContentTemplate > [19659692]  < span > 
  < svg   xmlns  =  " http://www.w3.org/2000 / svg  "    xmlns:  xsl  = "  http://www.w3.org/1999/xlink  "   x  =  " 0px "    y  =  " 0px " 
                         largeur [19659089] =  " 16 "    hauteur  =  " 16 "    viewBox  = [19659055] " 0 0 40 40 "    class  =  " editSVGIcon " > 
  < chemin   remplissage [1 9659089] =  " # F5CE85 "    d  =  " M5.982 29.309L8.571 26.719 13.618 31.115 10.715 34.019 2.453 37.547z  ">    </  chemin > 
  < chemin   fill  = "  # 967A44  "   d  = "  M8.595,27.403l4.291,3.737l-2.457,2.457l-7.026,3.001l3.001- 7.003L8.595,27.403 M8.548,26.036 l-2.988,2.988l-4.059,9.474L11,34.44l3.351-3.351L8.548,26.036L8.548,26.036z  ">    </  chemin > 
  < chemin   classe  =  " tête "    fill  =  " # 36404D "    d  =  " M3.805 33.13L1.504 38.5 6.888 36.201 z  ">   [19659070] </  chemin > 
  < chemin   classe  =  " caoutchouc "    remplissage  =  " # F78F8F "    d  =  " M30.062,5.215L32.3,2.978C32.931,2.347 , 33.769,2,34.66,2s1.729,0.347,2.36,0.978 c1.302,1.302,1.302,3.419,0,4.721l-2.237,2.237L30.062,5.215z  ">    </  chemin > 
  < chemin   class  =  " rubber-contour "    fill  =  " # C74343 "    d  =  " M34.66,2.5c0.758 , 0,1.471,0.295,2.007,0.831c1.107,1.107,1.107,2.907,0,4.014l-1.884,1.884 L30.77,5.215l1.884-1.884C33.189,2.795,33.902,2.5,34.66, 2,5 M34,66,1,5c-0,982,0-1,965,0,375-2,714,1,124l-2,591,2,591 l5,428,5,428l2,591-2,591c1,499-1,499,1,4 99-3.929,0-5.428v0C36.625,1.875,35.643,1.5,34.66,1.5L34.66,1.5z  ">    </  chemin [19659055]> 
  < g > 
  < path   class  =  " pencilBody "    fill  =  " # FFEEA3 "    d  =  " M11.346,33.388c-0.066- 0.153-0.157-0.308-0.282-0.454c-0.31-0.363-0.749-0.584-1.31-0.661 c-0.2-1.267-1.206-1.803-1.989-1.964c-0.132-0.864-0.649-1.342-1.201-1.582l21. 49-21.503l4.721,4.721L11.346,33.388z  ">    </  chemin > 
  < chemin   classe  =  " crayonBody-contour "    fill  =  " # BB9C4A "    d  =  " M28.054,7.931l4.014,4.014L11.431,32.594c-0.242-0.278-0.638-0.59-1.261-0.748 c-0.306-1.078-1.155-1.685-1.983-1.943c-0.151-0.546 -0.447-0.968-0.821-1.272L28.054,7.931 M28.053,6.517L5.56,29.023 c0,0,0.007,0,0.021,0c0.197,0,1.715,0.054,1.715,1.731c0,0, 1.993,0.062,1.993,1.99c1.982,0,1.71,1.697,1.71,1.697l22.482-22.495 L28.053,6.517L28.053,6.517z  ">    </  chemin > 
  </  g > 
  < g > 
  < chemin   fill  =  " # D9E7F5 "    d  =  " M29.107 4.764H34. 685V11.440999999999999H29.107z  "   transform  = "  rotation (-45.009 31.895 8.103)  ">   [19659070] </  chemin > 
  < chemin   fill  =  " # 788B9C "    d  =  " M31.507 , 4.477l4.014,4.014l-3.237,3.237L28.27,7.714L31.507,4.477 M31.507,3.063l-4.651,4.651 l5.428,5.428l4.651-4.651L31.507,3.063L31.507 , 3.063z  ">    </  chemin > 
  </  g > 
 [19659070] </  svg > 
  </  span > 
  </  ContentTemplate > 
  </  telerik:  RadButton > 
  </  ItemTemplate > 
  </  telerik:  GridTemplateColumn  ]> 
 

À l'aide des classes affectées à différentes parties du graphique et de quelques CSS, nous pouvons styliser le bouton et le modifier

Nous pouvons utiliser le pseudo-élément : hover pour modifier les couleurs de remplissage lorsque la souris est placée sur l'élément.

  < style > 
     .RadGrid   .RadButton.gridEditButton   {
         border :  none ; 
         background :  none  ; 
    } 

     .editSVGIcon : hover   {
         width :   20  px ; 
         height :   20  px ; 
    } 

         .editSVGIcon : survol   .rubber ,
         .editSVGIcon : hover   .rubber-contour   {
             fill :  darkred ; 
        } 

         .editSVGIcon [19659379]: hover   .head   {
             fill :  darkblue ; 
        } 

         .editSVGIcon : hover  . PencilBody   {
             fill :  lightblue ; 
        } 
  </  style > 
 

En suivant la même approche, les SVG peuvent être incorporés dans tous les champs de modèle qui permettent d'utiliser du HTML brut.

Icônes SVG réactives dans Telerik RadTabStrip

Faire une échelle SVG comme ses échelles de conteneur peut sembler être un tâche simple; cependant, en raison du comportement incohérent des différents navigateurs, cela s'avère être tout à fait le contraire. Il existe plusieurs ressources sur le Web qui traitent de ce sujet, nous allons donc ici simplement structurer les capacités de réponse des icônes SVG.

Comme les styles peuvent être intégrés directement dans la balise SVG, nous pouvons l'utiliser pour afficher et masquer des parties du SVG. basé sur des requêtes multimédias définies en interne.

Dans l'exemple suivant, nous utilisons à nouveau le logo Progress. Cette fois, nous utiliserons deux éléments de symbole séparés dans le SVG – un avec l'icône et un avec le texte et le signe TM. Grâce à la séparation des symboles, nous pouvons générer des versions petites et complètes du logo, que nous afficherons et masquerons plus tard en fonction de la requête multimédia.

 svg xmlns = "http://www.w3.org/ 2000 / svg "width =" 100% "height =" 100% "xmlns: xlink =" http://www.w3.org/1999/xlink ">
  < style > 
     .small   {
     visibilité :  hidden ; 
    } 
     .full   {
     visibilité :  visible ; 
    } 

    
     @media  écran et  ( max-width :  150px )   {
     .small   {
     visibilité :  visible ; 
    } 
     .full   {
     visibilité :  hidden ; 
    } 
    } 
    </  style > 

   < symbol   id  =  " logo "    viewBox  =  " 0 0 60 60  "> 
  < path   class  = "  3  "   fill  =  " # 5ce500 "    d  =  " M11.2 14.9L0 21.3l17.4 10.1v20.1l11.2-6.4c. 5-.3.9-1 .9-1.6V24.4L13 14.9c-.5-.3-1.3-.3-1.8 0z  ">    </  chemin > 
  < chemin   class  =  " 4 "    fill  = [19659055] " # 5ce500 "    d  =  " M12.1 48.4V34.5L0 41.5zM25 .2c-.5-.3-1.3-. 3-1.8 0L10.7 7.4l24.1 13.9v27.9L47.3 42c.5-.3.9-1 .9-1.6V13.6L25 .2z  ">    </  chemin > 
 [1 9659070] </  symbole > 

   < symbol   id  =  " ProgressTelerikTM "    viewBox  =  " 0 0 400 60  " > 
  < path   class  = "  1  "   fill  =  " # 7c878e "    d  =  " M396.7 18.4c-2 0-3.7 1.6-3.7 3.7 0 2.2 1.7 3.7 3.7 3.7s3.7-1.6 3.7-3.7c0-2.2-1.7-3.7-3.7-3.7zm0 6.8c-1.7 0-3-1.3-3-3.1s1.3-3.1 3-3.1 3 1.3 3 3.1-1.3 3.1- 3 3.1z  ">    </  path > 
  < path   class  = [19659055] " 2 "    fill  =  " # 7c878e "    d  =  "  M398,5 21,5c0-.9-.6-1.4-1.4-1.4h-1.8V24h1.1v-1.2h.3l.8 1.2h1.2l-.9-1.4c.4-.1.7-. 5.7-1.1zm-1.6.4h-.6V21h.6c.3 0 .5.2.5.4 0 .4-.2.5-.5.5zm-103.5-7.7h-28.5v2.6h12.7v32.4h2.9V16.8h12.9zm7.4 9.1c-6.7 0-10.9 5.6-10.9 13.4 0 7.9 4.7 12.9 11.8 12.9 3 0 5.5-.7 7.4-2.2v-2.7c-2.2 1.8-4.3 2.5-7.1 2.5-5.2 0-9.2-3.6-9.2-10.4H311v-1c-.2-7.4-3.6-12.5-10.2-12.5zm-8 11.1c.7-5.5 3.9-8.6 8-8.6 5 0 7.1 4.1 7.3 8.6h-15.3zM315 12.1h2.9v37.1H315zm18.1 11.2c-6.7 0-10.9 5.6-10.9 13.4 0 7.9 4.7 12.9 11.8 12.9 3 0 5.5 -.7 7.4-2.2v-2.7c-2.2 1.8-4.3 2.5-7.1 2.5-5.2 0-9.2-3.6-9.2-10.4h18.2v-1c-.1-7.4-3.6-12.5-10.2-12.5zm- 8 11.1c.7-5.5 3.9-8.6 8-8.6 5 0 7.1 4.1 7.3 8.6h-15.3zm25-6.5v-4h-2.9v25.3h2.9V31.5c1.2-3.2 3.6-5.5 6.7-5.5.9 0 1.7.2 2.3.5v-2.8c-.6-.2-1.3-.3-2.2-.3-3.1-.1-5.7 2-6.8 4.5zm12.1-4h2.8v25.3h-2.8zm1.5 -9.7c-1.1 0-1.9.9-1.9 1.9 0 1.1.9 1.9 1.9 1.9s1.9-.9 1.9-1.9-.8-1.9-1.9-1.9zm26.5 9.7h-3.7l-12.8 11V12. 1h-2.9v37.1h2.9v-13l13.2 13h3.5l-13.8-13.8z  ">    </  chemin > 
  < chemin   classe  =  " 5 "    fill  =  " # 4b4e52 "    d  =  " M117.9 22.5c-4.3 0- 7,7 1,6-9,8 4,7-2,3 3,2-2,6 7-2,6 9 0 8,3 4,9 13,6 12,5 13,6 9,2 0 12,5-7,4 12,5-13,8 0-3,7-1,1-7-3,1-9,4-2,3-2,7-5,6-4,1-9,5- 4.1zm0 22.4c-4.2 0-6.9-3.4-6.9-8.8 0-5.5 2.6-8.9 6.9-8.9 4.2 0 6.9 3.4 6.9 8.8 0 5.5-2.7 8.9-6.9 8.9zM74.8 13.6H61.7v35.6h5.8v- 14h7.4c8 0 12.4-3.9 12.4-11-.1-3.1-1.3-10.6-12.5-10.6zM74.1 30h-6.6V18.9h7.4c4.3 0 6.4 1.8 6.4 5.5 0 4-2.1 5.6-7.2 5.6zm26 .6-7.3c-2.2.3-3.9 1.4-5.2 3.5V23h-5.1v26.1h5.4V37.9c0-5.2.4-9.6 5.9-9.6.6 0 1.1.1 1.7.3l.7.2 1-5.3-. 4-.2c-1.2-.5-2.6-.7-4-.6zm145 12.1c-1.3-.5-4-1.2-6.1-1.7-1-.3-1.9-.5-2.5-.7- 2-.6-3-1.4-3-2.6 0-2.5 3.5-2.8 5-2.8 1.8 0 4.8.5 5.3 3.5l.1.4h5.2v-.5c-.4-5.3-4-7.8-10.8-7.8 -5.1 0-10.2 2.4-10.2 7.6 0 2.8 1.9 5.2 5.2 6.3 1.3.5 3.5 1.1 5.6 1.7 1.2.3 2.4.7 3.3.9 1.6.5 2.4 1.4 2.4 2.6 0 2.4-2.9 3.3-5.6 3.3-2.5 0- 5,5-.7-6.2-3.9l-.1-.4h-5.2l.1.6c.5 5.4 4.6 8.3 11.4 8.3 7.7 0 11.2-4.2 11.2-8.4 -.1-3-1.8-5.2-5.1-6.4zm-94-9.6c-1.7-1.8-4.1-2.7-7-2.7-7.9 0-11.5 7-11.5 13.5 0 6.6 3.6 13.4 11.5 13.4 2.7 0 5- 1 6.7-2.7 0 1.2 0 2.3-.1 2.7-.3 4.3-2.4 6.3-6.5 6.3-2.3 0-4.9-.8-5.4-3.1l-.1-.5H134l.1.7c.6 4.6 4.6 7.5 10.6 7,5 5,2 0 8,9-2 10,8-5,7,9-1,8 1,3-4,4 1,3-7,8V23,1h-5,1v2,1zm-6,6 19,3c-1,9 0-6,3-.9-6,3-8,8 0-5,2 2,5-8,4 6,4 -8.4 3.1 0 6.3 2.2 6.3 8.4.1 5.5-2.3 8.8-6.4 8.8zm75.6-9.7c-1.3-.5-4-1.2-6.1-1.7-1-.3-1.9-.5-2.5-. 7-2-.6-3-1.4-3-2.6 0-2.5 3.5-2.8 5-2.8 1.8 0 4.8.5 5.3 3.5l.1.4h5.2v-.5c-.4-5.3-4-7.8-10.8 -7.8-5.1 0-10.2 2.4-10.2 7.6 0 2.8 1.9 5.2 5.2 6.3 1.3.5 3.5 1.1 5.6 1.7 1.2.3 2.4.7 3.3.9 1.6.5 2.4 1.4 2.4 2.6 0 2.4-2.9 3.3-5.6 3.3-2.5 0-5,5-.7-6.2-3.9l-.1-.4h-5.2l.1.6c.5 5.4 4.6 8.3 11.4 8.3 7.7 0 11.2-4.2 11.2-8.4 0-3-1.7-5.2-5.1-6.4zm -19,9 0c-.3-7.3-5-12.2-11.9-12.2-4 0-7.3 1.6-9.5 4.5-1.8 2.4-2.8 5.7-2.8 9.1 0 8.1 5 13.5 12.5 13.5 5.8 0 9.8-2.9 11.2-8.3l. 2-.6h-5.4l-.1.3c-1.1 3.2-3.8 3.9-5.9 3.9-4.1 0-6.7-2.7-7-7.1h18.5l.1-.5c.1-.6.1-1.5.1-2.1 v-.5zm-18.4-1.6c.5-3.6 2.9- 5,9 6,5-5,9 2,7 0 5,9 1,6 6,3 5,9h-12,8zm-10,5-10,5c-2,2,3-3,9 1,4-5,2 3,5V23h-5,1v26,1h5,4V37,9c0-5,2,4-9,6 5,9-9,6,6 0 1.1.1 1.7.3l.7.2 1-5.3-.4-.2c-1.2-.5-2.6-.7-4-.6zm84.8-1.2c0-.9-.6-1.4-1.4-1.4 h-1.8V24h1.1v-1.2h.3l.8 1.2h1.2l-.9-1.4c.4-.1.7-.5.7-1.1zm-1.5.4h-.6V21h.6c.3 0 .5.2.5.4 0 .4-.2.5-.5.5z  ">    </  chemin > 
  < chemin [19659169] class  =  " 6 "    fill  =  " # 4b4e52 "    d [19659089] =  " M255 18.4c-2 0-3.7 1.6-3.7 3.7 0 2.2 1.7 3.7 3.7 3.7s3.7-1.6 3.7-3.7c0-2.2-1.7-3.7-3.7-3.7zm0 6.8c -1,7 0-3-1.3-3-3.1s1.3-3.1 3-3.1 3 1.3 3 3.1-1.4 3.1-3 3.1z  ">    </  chemin > 
  </  symbole > 

   < symbol   id  =  " complete "    viewBox  =  " 0 0 400 60  "> 
  < use    xlink:  href  = "  #logo  "   x  =  " 0 "    y  =  " 0 "    width  =  " 60 "    height  =  " 60 "  /> 
 [19659070] < utilisez    xlink:  href  =  " #ProgressTelerikTM "    x  =  "  0  "   y  = "  0  "   width  = "  400  "   hauteur  = "  60  " /> 
  </  symbole > 

   < use   class  =  " small "     xlink:  href  =  " #logo "    x  =  " 0 "    y  =  " 0  "  /> 
  < use   class  = "  full  "    xlink:  href  =  " #complete "    x  =  " 0 "    y  =  " 0 "  /> 

 </  svg > 
 

Utilisons ce logo comme onglet en pleine largeur Contrôle RadTabStrip .

  < telerik:  RadTabStrip   runat  =  " server "    ID  =  " RadTabStrip1 "    MultiPageID  =  " RadMultiPage1 "    Width  =  " 100% " > 
  < Onglets > 
  < telerik:  RadTab   Width  =  " 25%  ] "   CssClass  = "  logoBar  ">    </  telerik:  RadTab [19659055]> 
  < telerik:  RadTab   Text  =  " Tab 2 "    Wid th  =  " 25% " >    </  telerik:  RadTab > 
 [19659070] < telerik:  RadTab   Text  =  " Tab 3 "    Width  =  " 25%  ">    </  telerik:  RadTab > 
  < telerik:  RadTab   Text  =  " Tab 4 "    Width  =  " 25% " >    </  telerik:  RadTab > 
  </  Tabs > 
  </ [19659075] telerik:  RadTabStrip > 
 .logoBar .rtsLink {
    couleur: transparent;
    image de fond: url ("SVGs / ProgressLogoFull.svg")! important;
    taille du fond: 80%;
    background-repeat: pas de répétition;
    background-position-x: centre;
    background-position-y: centre;
}

Le résultat:

Ressources d'icônes SVG supplémentaires

Voici quelques autres ressources utiles avec des détails sur la création et l'utilisation d'icônes SVG réactives:

Et plus sur les SVG et les icônes SVG:

Conclusion

Les possibilités qu'offrent les SVG sont bien plus que démontrées dans ce blog. La personnalisation et l'expérience utilisateur sophistiquée peuvent être prises au niveau suivant avec du JavaScript et des animations. Bien que la prise en charge incohérente du navigateur rend cela assez compliqué maintenant, nous espérons que cela changera dans un proche avenir et que l'utilisation des SVG fera partie de notre routine quotidienne.

Dans cet article, nous avons choisi seulement trois scénarios pour intégrer les icônes SVG dans Contrôles Telerik AJAX . Mais si vous souhaitez utiliser des icônes SVG avec l'un des 120 autres contrôles Telerik ASP.NET AJAX, n'hésitez pas à laisser un commentaire ci-dessous ou à soumettre un ticket à l'équipe d'assistance Telerik!

Vous pouvez en savoir plus sur Telerik UI pour ASP.NET AJAX et lancez un essai gratuit ici.

Démarrez un essai gratuit