SvgPublish WebPart
by Nikolay Belyh
SvgPublish WebPart creates a lightweight interactive SVG/Visio file view/dashboard.
SVG Publish SharePoint Web Part
This package contains a SharePoint Framework (SPFx) Web Part that creates interactive web presentations from SVG diagrams exported from Microsoft Visio.
The web part allows embedding interactive SVG diagrams into modern SharePoint pages with rich functionality including pan, zoom, hyperlinks, tooltips, layers, shape selection, and comprehensive navigation features. It provides enhanced interactivity and customization options specifically designed for Visio-exported SVG files.
One of the key capabilities is the sophisticated shape interaction system, enabling users to select shapes, view detailed properties, and navigate through connected diagram elements. This makes it ideal for complex process flows, organizational charts, technical diagrams, and any scenario requiring detailed shape-level interaction.
The web part supports multiple display modes including fullscreen presentation, embedded views, and responsive layouts that adapt to different screen sizes. Advanced features include layer management for controlling diagram visibility, customizable toolbars, and flexible navigation options that can be tailored to specific use cases.
Additional functionality includes support for hyperlinks within diagrams, shape property tooltips that display metadata, search capabilities across diagram content, and the ability to highlight specific shapes or regions. The solution supports custom content within shapes and provides a configurable sidebar for additional information display. Options are also available for customizing the user interface to match organizational branding and presentation requirements.
Interactive SVG Viewer
The web part renders SVG files with full interactivity, supporting pan, zoom, and shape selection functionality for enhanced diagram exploration.
Shape Properties and Tooltips
Displays detailed shape information through tooltips and property panels, allowing users to access metadata, custom content, and additional context for diagram elements.
Layer Management
Provides layer visibility controls, enabling users to show or hide specific diagram layers to focus on relevant information and reduce visual complexity.
Hyperlink Support
Supports hyperlinks embedded within SVG shapes, allowing navigation to external resources, other diagrams, or specific locations within the same diagram.
Search Functionality
Includes search capabilities that allow users to quickly locate specific shapes, text, or content within large and complex diagrams.
Fullscreen and Embedded Modes
The web part can be displayed in fullscreen mode for immersive viewing or embedded within SharePoint pages as part of a larger dashboard or content layout.
Responsive Design
Automatically adapts to different screen sizes and orientations, ensuring optimal viewing experience across desktop, tablet, and mobile devices.
Customizable Toolbar
Provides a configurable toolbar with options to show or hide specific tools and controls based on user requirements and permissions.
Sidebar Panel
Features a configurable sidebar that can display additional information, custom content, shape details, and contextual data to enhance the diagram viewing experience.
Navigation Controls
Includes comprehensive navigation features for moving through multi-page diagrams, zooming to specific areas, and managing view states.
Selection Highlighting
Supports shape selection with visual highlighting, making it easy to identify and work with specific diagram elements during exploration and analysis.
Technical Specifications
- Built with SharePoint Framework (SPFx) for modern SharePoint environments
- Supports SVG files exported from Microsoft Visio with preserved interactivity
- Compatible with SharePoint Online
- Responsive design optimized for various screen sizes and devices
- Configurable security and permission settings
Supported Modes
The SVG Publish web part supports multiple deployment configurations to meet different organizational needs:
- SharePoint Web Part - Standard web part deployment for embedding within SharePoint pages
- SharePoint Full Page - Full-page application mode for immersive diagram viewing experiences
- Microsoft Teams Tab - Integration as a custom tab within Microsoft Teams
Use Cases
- Interactive process flow documentation and training materials
- Organizational charts with detailed employee information and navigation
- Technical system diagrams with component details and relationships
- Facility layouts and floor plans with interactive room and area information
- Project timelines and workflow visualizations with milestone details
More Information
For further details and support please use the WebPart website:
